Index: /main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js	(revision 36216)
+++ /main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js	(revision 36217)
@@ -11,86 +11,86 @@
 */
 function urlEncodeChar(single_char_string) {
-   /*var hex = Number(single_char_string.charCodeAt(0)).toString(16);
-   var str = "" + hex;
-   str = "%" + str.toUpperCase();
-   return str;
-   */
-
-   var hex = "%" + Number(single_char_string.charCodeAt(0)).toString(16).toUpperCase();
-   return hex;
+    /*var hex = Number(single_char_string.charCodeAt(0)).toString(16);
+    var str = "" + hex;
+    str = "%" + str.toUpperCase();
+    return str;
+    */
+
+    var hex = "%" + Number(single_char_string.charCodeAt(0)).toString(16).toUpperCase();
+    return hex;
 }
 
 /*
- Tomcat 8 appears to be stricter in requiring unsafe and reserved chars
- in URLs to be escaped with URL encoding
- See section "Character Encoding Chart of
- https://perishablepress.com/stop-using-unsafe-characters-in-urls/
- Reserved chars:
-    ; / ? : @ = &
-    ----->  %3B %2F %3F %3A %40 %3D %26
- [Now also reserved, but no special meaning yet in URLs (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
- and not required to be enforced yet, so we're aren't at present dealing with these:
-    ! ' ( ) *
- ]
- Unsafe chars:
-    " < > # % { } | \ ^ ~ [ ] ` and SPACE/BLANK
-    ----> %22 %3C %3E %23 %25 %7B %7D %7C %5C %5E ~ %5B %5D %60 and %20
- But the above conflicts with the reserved vs unreserved listings at
-    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
- Possibly more info: https://stackoverflow.com/questions/1547899/which-characters-make-a-url-invalid
-
- And the bottom of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
- lists additional characters that have been reserved since and which need encoding when in a URL component.
-
- Javascript already provides functions encodeURI() and encodeURIComponent(), see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
- However, the set of chars they deal with only partially overlap with the set of chars that need encoding as per the RFC3986 for URIs and RFC1738 for URLs discussed at
- https://perishablepress.com/stop-using-unsafe-characters-in-urls/
- We want to handle all the characters listed as unsafe and reserved at https://perishablepress.com/stop-using-unsafe-characters-in-urls/
- so we define and use our own conceptually equivalent methods for both existing JavaScript methods: 
- - makeSafeURL() for Javascript's encodeURI() to make sure all unsafe characters in URLs are escaped by being URL encoded
- - and makeSafeURLComponent() for JavaScript's encodeURIComponent to additionally make sure all reserved characters in a URL portion are escaped by being URL encoded too
-
- Function makeSafeURL() is passed a string that represents a URL and therefore only deals with characters that are unsafe in a URL and which therefore require escaping. 
- Function makeSafeURLComponent() deals with portions of a URL that when decoded need not represent a URL at all, for example data like inline templates passed in as a
- URL query string's parameter values. As such makeSafeURLComponent() should escape both unsafe URL characters and characters that are reserved in URLs since reserved
- characters in the query string part (as query param values representing data) may take on a different meaning from their reserved meaning in a URL context.
+  Tomcat 8 appears to be stricter in requiring unsafe and reserved chars
+  in URLs to be escaped with URL encoding
+  See section "Character Encoding Chart of
+  https://perishablepress.com/stop-using-unsafe-characters-in-urls/
+  Reserved chars:
+     ; / ? : @ = &
+     ----->  %3B %2F %3F %3A %40 %3D %26
+  [Now also reserved, but no special meaning yet in URLs (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
+  and not required to be enforced yet, so we're aren't at present dealing with these:
+     ! ' ( ) *
+  ]
+  Unsafe chars:
+     " < > # % { } | \ ^ ~ [ ] ` and SPACE/BLANK
+     ----> %22 %3C %3E %23 %25 %7B %7D %7C %5C %5E ~ %5B %5D %60 and %20
+  But the above conflicts with the reserved vs unreserved listings at
+     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
+  Possibly more info: https://stackoverflow.com/questions/1547899/which-characters-make-a-url-invalid
+
+  And the bottom of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+  lists additional characters that have been reserved since and which need encoding when in a URL component.
+
+  Javascript already provides functions encodeURI() and encodeURIComponent(), see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
+  However, the set of chars they deal with only partially overlap with the set of chars that need encoding as per the RFC3986 for URIs and RFC1738 for URLs discussed at
+  https://perishablepress.com/stop-using-unsafe-characters-in-urls/
+  We want to handle all the characters listed as unsafe and reserved at https://perishablepress.com/stop-using-unsafe-characters-in-urls/
+  so we define and use our own conceptually equivalent methods for both existing JavaScript methods: 
+  - makeSafeURL() for Javascript's encodeURI() to make sure all unsafe characters in URLs are escaped by being URL encoded
+  - and makeSafeURLComponent() for JavaScript's encodeURIComponent to additionally make sure all reserved characters in a URL portion are escaped by being URL encoded too
+
+  Function makeSafeURL() is passed a string that represents a URL and therefore only deals with characters that are unsafe in a URL and which therefore require escaping. 
+  Function makeSafeURLComponent() deals with portions of a URL that when decoded need not represent a URL at all, for example data like inline templates passed in as a
+  URL query string's parameter values. As such makeSafeURLComponent() should escape both unsafe URL characters and characters that are reserved in URLs since reserved
+  characters in the query string part (as query param values representing data) may take on a different meaning from their reserved meaning in a URL context.
 */
 
 /* URL encodes both 
-  - UNSAFE characters to make URL safe, by calling makeSafeURL()
-  - and RESERVED characters (characters that have reserved meanings within a URL) to make URL valid, since the url component parameter could use reserved characters
-  in a non-URL sense. For example, the inline template (ilt) parameter value of a URL could use '=' and '&' signs where these would have XSLT rather than URL meanings.
- 
-  See end of https://www.w3schools.com/jsref/jsref_replace.asp to use a callback passing each captured element of a regex in str.replace()
+   - UNSAFE characters to make URL safe, by calling makeSafeURL()
+   - and RESERVED characters (characters that have reserved meanings within a URL) to make URL valid, since the url component parameter could use reserved characters
+   in a non-URL sense. For example, the inline template (ilt) parameter value of a URL could use '=' and '&' signs where these would have XSLT rather than URL meanings.
+  
+   See end of https://www.w3schools.com/jsref/jsref_replace.asp to use a callback passing each captured element of a regex in str.replace()
 */
 function makeURLComponentSafe(url_part, encode_percentages) {
-   // https://stackoverflow.com/questions/12797118/how-can-i-declare-optional-function-parameters-in-javascript
-   encode_percentages = encode_percentages || 1; // this method forces the URL-encoding of any % in url_part, e.g. do this for inline-templates that haven't ever been encoded
-   
-   var url_encoded = makeURLSafe(url_part, encode_percentages);
-   //return url_encoded.replace(/;/g, "%3B").replace(/\//g, "%2F").replace(/\?/g, "%3F").replace(/\:/g, "%3A").replace(/\@/g, "%40").replace(/=/g, "%3D").replace(/\&/g,"%26");
-   url_encoded = url_encoded.replace(/[\;\/\?\:\@\=\&]/g, function(s) { 
-  return urlEncodeChar(s);
-   }); 
-   return url_encoded;
+    // https://stackoverflow.com/questions/12797118/how-can-i-declare-optional-function-parameters-in-javascript
+    encode_percentages = encode_percentages || 1; // this method forces the URL-encoding of any % in url_part, e.g. do this for inline-templates that haven't ever been encoded
+    
+    var url_encoded = makeURLSafe(url_part, encode_percentages);
+    //return url_encoded.replace(/;/g, "%3B").replace(/\//g, "%2F").replace(/\?/g, "%3F").replace(/\:/g, "%3A").replace(/\@/g, "%40").replace(/=/g, "%3D").replace(/\&/g,"%26");
+    url_encoded = url_encoded.replace(/[\;\/\?\:\@\=\&]/g, function(s) { 
+	return urlEncodeChar(s);
+    }); 
+    return url_encoded;
 }
 
 /* 
-  URL encode UNSAFE characters to make URL passed in safe.
-  Set encode_percentages to 1 (true) if you don't want % signs encoded: you'd do so if the url is already partly URL encoded.
+   URL encode UNSAFE characters to make URL passed in safe.
+   Set encode_percentages to 1 (true) if you don't want % signs encoded: you'd do so if the url is already partly URL encoded.
 */
 function makeURLSafe(url, encode_percentages) {    
-   encode_percentages = encode_percentages || 0; // https://stackoverflow.com/questions/12797118/how-can-i-declare-optional-function-parameters-in-javascript
-
-   var url_encoded = url;
-   if(encode_percentages) { url_encoded = url_encoded.replace(/\%/g,"%25"); } // encode % first
-   //url_encoded = url_encoded.replace(/ /g, "%20").replace(/\"/g,"%22").replace(/\</g,"%3C").replace(/\>/g,"%3E").replace(/\#/g,"%23").replace(/\{/g,"%7B").replace(/\}/g,"%7D");
-   //url_encoded = url_encoded.replace(/\|/g,"%7C").replace(/\\/g,"%5C").replace(/\^/g,"%5E").replace(/\[/g,"%5B").replace(/\]/g,"%5D").replace(/\`/g,"%60");
-   // Should we handle ~, but then what is its URL encoded value? Because https://meyerweb.com/eric/tools/dencoder/ URLencodes ~ to ~.
-   //return url_encoded;    
-   url_encoded = url_encoded.replace(/[\ \"\<\>\#\{\}\|\\^\~\[\]\`]/g, function(s) { 
-  return urlEncodeChar(s);
-   });
-   return url_encoded;
+    encode_percentages = encode_percentages || 0; // https://stackoverflow.com/questions/12797118/how-can-i-declare-optional-function-parameters-in-javascript
+
+    var url_encoded = url;
+    if(encode_percentages) { url_encoded = url_encoded.replace(/\%/g,"%25"); } // encode % first
+    //url_encoded = url_encoded.replace(/ /g, "%20").replace(/\"/g,"%22").replace(/\</g,"%3C").replace(/\>/g,"%3E").replace(/\#/g,"%23").replace(/\{/g,"%7B").replace(/\}/g,"%7D");
+    //url_encoded = url_encoded.replace(/\|/g,"%7C").replace(/\\/g,"%5C").replace(/\^/g,"%5E").replace(/\[/g,"%5B").replace(/\]/g,"%5D").replace(/\`/g,"%60");
+    // Should we handle ~, but then what is its URL encoded value? Because https://meyerweb.com/eric/tools/dencoder/ URLencodes ~ to ~.
+    //return url_encoded;    
+    url_encoded = url_encoded.replace(/[\ \"\<\>\#\{\}\|\\^\~\[\]\`]/g, function(s) { 
+	return urlEncodeChar(s);
+    });
+    return url_encoded;
 }
 
@@ -99,27 +99,27 @@
 ***************/
 function moveScroller() {
- var move = function() {
-   var editbar = $("#editBar");
-   var st = $(window).scrollTop();
-   var fa = $("#float-anchor").offset().top;
-   if(st > fa) {
-     
-     editbar.css({
-    position: "fixed",
-      top: "0px",
-      width: editbar.data("width"),
-      //width: "30%"
-           });
-   } else {
-     editbar.data("width", editbar.css("width"));
-     editbar.css({
-    position: "relative",
-      top: "",
-      width: ""
-      });
-   }
- };
- $(window).scroll(move);
- move();
+  var move = function() {
+    var editbar = $("#editBar");
+    var st = $(window).scrollTop();
+    var fa = $("#float-anchor").offset().top;
+    if(st > fa) {
+      
+      editbar.css({
+	  position: "fixed",
+	    top: "0px",
+	    width: editbar.data("width"),
+	    //width: "30%"
+            });
+    } else {
+      editbar.data("width", editbar.css("width"));
+      editbar.css({
+	  position: "relative",
+	    top: "",
+	    width: ""
+	    });
+    }
+  };
+  $(window).scroll(move);
+  move();
 }
 
@@ -127,42 +127,42 @@
 function floatMenu(enabled)
 {
-  var menu = $(".tableOfContentsContainer");
-  if(enabled)
-  {
-     menu.data("position", menu.css("position"));
-     menu.data("width", menu.css("width"));
-     menu.data("right", menu.css("right"));
-     menu.data("top", menu.css("top"));
-     menu.data("max-height", menu.css("max-height"));
-     menu.data("overflow", menu.css("overflow"));
-     menu.data("z-index", menu.css("z-index"));
-     
-     menu.css("position", "fixed");
-     menu.css("width", "300px");
-     menu.css("right", "0px");
-     menu.css("top", "100px");
-     menu.css("max-height", "600px");
-     menu.css("overflow", "auto");
-     menu.css("z-index", "200");
-     
-     $("#unfloatTOCButton").show();
-  }
-  else
-  {
-     menu.css("position", menu.data("position"));
-     menu.css("width", menu.data("width"));
-     menu.css("right", menu.data("right"));
-     menu.css("top", menu.data("top"));
-     menu.css("max-height", menu.data("max-height"));
-     menu.css("overflow", menu.data("overflow"));
-     menu.css("z-index", menu.data("z-index"));
-     
-     $("#unfloatTOCButton").hide();
-     $("#floatTOCToggle").prop("checked", false);
-  }
-  
-  var url = gs.xsltParams.library_name + "?a=d&ftoc=" + (enabled ? "1" : "0") + "&c=" + gs.cgiParams.c;
-  
-  $.ajax(url);
+	var menu = $(".tableOfContentsContainer");
+	if(enabled)
+	{
+		menu.data("position", menu.css("position"));
+		menu.data("width", menu.css("width"));
+		menu.data("right", menu.css("right"));
+		menu.data("top", menu.css("top"));
+		menu.data("max-height", menu.css("max-height"));
+		menu.data("overflow", menu.css("overflow"));
+		menu.data("z-index", menu.css("z-index"));
+		
+		menu.css("position", "fixed");
+		menu.css("width", "300px");
+		menu.css("right", "0px");
+		menu.css("top", "100px");
+		menu.css("max-height", "600px");
+		menu.css("overflow", "auto");
+		menu.css("z-index", "200");
+		
+		$("#unfloatTOCButton").show();
+	}
+	else
+	{
+		menu.css("position", menu.data("position"));
+		menu.css("width", menu.data("width"));
+		menu.css("right", menu.data("right"));
+		menu.css("top", menu.data("top"));
+		menu.css("max-height", menu.data("max-height"));
+		menu.css("overflow", menu.data("overflow"));
+		menu.css("z-index", menu.data("z-index"));
+		
+		$("#unfloatTOCButton").hide();
+		$("#floatTOCToggle").prop("checked", false);
+	}
+	
+	var url = gs.xsltParams.library_name + "?a=d&ftoc=" + (enabled ? "1" : "0") + "&c=" + gs.cgiParams.c;
+	
+	$.ajax(url);
 }
 
@@ -174,88 +174,88 @@
 
 function addTKLabelToImage(labelName, definition, name, comment) {
-  // lists of tkLabels and their corresponding codes, in order
-  let tkLabels = ["Attribution","Clan","Family","MultipleCommunities","CommunityVoice","Creative","Verified","NonVerified","Seasonal","WomenGeneral","MenGeneral",
-     "MenRestricted","WomenRestricted","CulturallySensitive","SecretSacred","OpenToCommercialization","NonCommercial","CommunityUseOnly","Outreach","OpenToCollaboration"];
-  let tkCodes = ["tk_a","tk_cl","tk_f","tk_mc","tk_cv","tk_cr","tk_v","tk_nv","tk_s","tk_wg","tk_mg","tk_mr","tk_wr","tk_cs","tk_ss","tk_oc","tk_nc","tk_co","tk_o","tk_cb"];
-  for (let i = 0; i < tkLabels.length; i++) {
-     if (labelName == tkLabels[i]) {
-        let labeldiv = document.querySelectorAll(".tklabels img");
-        for (image of labeldiv) {
-           let labelCode = image.src.substr(image.src.lastIndexOf("/") + 1).replace(".png", ""); // get tk label code from image file name
-           if (labelCode == tkCodes[i]) {
-              image.title = "TK " + name + ": " + definition + " Click for more details."; // set tooltip
-              if (image.parentElement.parentElement.parentElement.classList[0] != "tocSectionTitle") { // disable onclick event in favourites section
-                 image.addEventListener("click", function(e) {
-                    let currPopup = document.getElementsByClassName("tkPopup")[0];
-                    if (currPopup == undefined || (currPopup != undefined && currPopup.id != labelCode)) { 
-                       let popup = document.createElement("div");
-                       popup.classList.add("tkPopup");
-                       popup.id = labelCode;
-                       let popupText = document.createElement("span");
-                       let heading = "<h1>Traditional Knowledge Label:<br><h2>" + name + "</h2></h1>";
-                       let moreInformation = "<br> For more information about TK Labels, ";
-                       let link = document.createElement("a");
-                       link.innerHTML = "click here.";
-                       link.href = "https://localcontexts.org/labels/traditional-knowledge-labels/";
-                       link.target = "_blank";
-                       popupText.innerHTML = heading + comment + moreInformation;
-                       popupText.appendChild(link);
-                       let closeButton = document.createElement("span");
-                       closeButton.innerHTML = "&#215;";
-                       closeButton.id = "tkCloseButton";
-                       closeButton.title = "Click to close window."
-                       closeButton.addEventListener("click", function(e) {
-                          closeButton.parentElement.remove();
-                       });
-                       popup.appendChild(closeButton);
-                       popup.appendChild(popupText);
-                       e.target.parentElement.appendChild(popup);
-                    }
-                    if (currPopup) currPopup.remove(); // remove existing popup div
-                 });
-              }
-           }
-        }
-     }
-  }
+   // lists of tkLabels and their corresponding codes, in order
+   let tkLabels = ["Attribution","Clan","Family","MultipleCommunities","CommunityVoice","Creative","Verified","NonVerified","Seasonal","WomenGeneral","MenGeneral",
+      "MenRestricted","WomenRestricted","CulturallySensitive","SecretSacred","OpenToCommercialization","NonCommercial","CommunityUseOnly","Outreach","OpenToCollaboration"];
+   let tkCodes = ["tk_a","tk_cl","tk_f","tk_mc","tk_cv","tk_cr","tk_v","tk_nv","tk_s","tk_wg","tk_mg","tk_mr","tk_wr","tk_cs","tk_ss","tk_oc","tk_nc","tk_co","tk_o","tk_cb"];
+   for (let i = 0; i < tkLabels.length; i++) {
+      if (labelName == tkLabels[i]) {
+         let labeldiv = document.querySelectorAll(".tklabels img");
+         for (image of labeldiv) {
+            let labelCode = image.src.substr(image.src.lastIndexOf("/") + 1).replace(".png", ""); // get tk label code from image file name
+            if (labelCode == tkCodes[i]) {
+               image.title = "TK " + name + ": " + definition + " Click for more details."; // set tooltip
+               if (image.parentElement.parentElement.parentElement.classList[0] != "tocSectionTitle") { // disable onclick event in favourites section
+                  image.addEventListener("click", function(e) {
+                     let currPopup = document.getElementsByClassName("tkPopup")[0];
+                     if (currPopup == undefined || (currPopup != undefined && currPopup.id != labelCode)) { 
+                        let popup = document.createElement("div");
+                        popup.classList.add("tkPopup");
+                        popup.id = labelCode;
+                        let popupText = document.createElement("span");
+                        let heading = "<h1>Traditional Knowledge Label:<br><h2>" + name + "</h2></h1>";
+                        let moreInformation = "<br> For more information about TK Labels, ";
+                        let link = document.createElement("a");
+                        link.innerHTML = "click here.";
+                        link.href = "https://localcontexts.org/labels/traditional-knowledge-labels/";
+                        link.target = "_blank";
+                        popupText.innerHTML = heading + comment + moreInformation;
+                        popupText.appendChild(link);
+                        let closeButton = document.createElement("span");
+                        closeButton.innerHTML = "&#215;";
+                        closeButton.id = "tkCloseButton";
+                        closeButton.title = "Click to close window."
+                        closeButton.addEventListener("click", function(e) {
+                           closeButton.parentElement.remove();
+                        });
+                        popup.appendChild(closeButton);
+                        popup.appendChild(popupText);
+                        e.target.parentElement.appendChild(popup);
+                     }
+                     if (currPopup) currPopup.remove(); // remove existing popup div
+                  });
+               }
+            }
+         }
+      }
+   }
 }
 
 function addTKLabelsToImages(lang) {
-  if (tkMetadataElements == null) {
-     console.error("ajax call not yet loaded tk label metadata set");
-  } else {
-     for (label of tkMetadataElements) { // for each tklabel element in tk.mds
-        let tkLabelName = label.attributes.name.value; // Element name=""
-        let attributes = label.querySelectorAll("[code=" + lang + "] Attribute"); // gets attributes for selected language
-        let tkName = attributes[0].textContent; // name="label"
-        let tkDefinition = attributes[1].textContent; // name="definition"
-        let tkComment = attributes[2].textContent; // name="comment"
-        addTKLabelToImage(tkLabelName, tkDefinition, tkName, tkComment);       
-     }  
-  }
+   if (tkMetadataElements == null) {
+      console.error("ajax call not yet loaded tk label metadata set");
+   } else {
+      for (label of tkMetadataElements) { // for each tklabel element in tk.mds
+         let tkLabelName = label.attributes.name.value; // Element name=""
+         let attributes = label.querySelectorAll("[code=" + lang + "] Attribute"); // gets attributes for selected language
+         let tkName = attributes[0].textContent; // name="label"
+         let tkDefinition = attributes[1].textContent; // name="definition"
+         let tkComment = attributes[2].textContent; // name="comment"
+         addTKLabelToImage(tkLabelName, tkDefinition, tkName, tkComment);       
+      }  
+   }
 }
 
 function loadTKMetadataSet(lang) {
-  tkMetadataSetStatus = "loading";
-  $.ajax({
-     url: gs.variables["tkMetadataURL"],
-     success: function(xml) {
-        tkMetadataSetStatus = "loaded";
-        let parser = new DOMParser();
-        let tkmds = parser.parseFromString(xml, "text/xml");
-        tkMetadataElements = tkmds.querySelectorAll("Element");
-        if (document.readyState === "complete") {
-           addTKLabelsToImages(lang);
-        } else {
-           window.onload = function() {
-              addTKLabelsToImages(lang);
-           }
-        }
-     },
-     error: function() {
-        tkMetadataSetStatus = "no-metadata-set-for-this-collection";
-        console.log("No TK Label Metadata-set found for this collection");
-     }
-  });
+   tkMetadataSetStatus = "loading";
+   $.ajax({
+      url: gs.variables["tkMetadataURL"],
+      success: function(xml) {
+         tkMetadataSetStatus = "loaded";
+         let parser = new DOMParser();
+         let tkmds = parser.parseFromString(xml, "text/xml");
+         tkMetadataElements = tkmds.querySelectorAll("Element");
+         if (document.readyState === "complete") {
+            addTKLabelsToImages(lang);
+         } else {
+            window.onload = function() {
+               addTKLabelsToImages(lang);
+            }
+         }
+      },
+      error: function() {
+         tkMetadataSetStatus = "no-metadata-set-for-this-collection";
+         console.log("No TK Label Metadata-set found for this collection");
+      }
+   });
 };
 
@@ -263,291 +263,319 @@
 
 function loadAudio(audio, sectionData) {
-  var speakerObjects = [];
-  var uniqueSpeakers;
-  const inputFile = sectionData;
-  var itemType;
-
-  var accentColour = "#4CA72D";
-  var regionTransparency = "59";
-
-  var waveformContainer = document.getElementById("waveform");
-  
-  var wavesurfer = WaveSurfer.create({ // wavesurfer options
-     container: waveformContainer,
-     backend: "MediaElement",
-     backgroundColor: "rgb(54, 73, 78)",
-     waveColor: "white",
-     progressColor: ["white", accentColour],
-     barWidth: 2,
-     barHeight: 1.2,
-     barGap: 2,
-     barRadius: 1,
-     cursorColor: 'black',
-     plugins: [
-        WaveSurfer.regions.create(),
-        WaveSurfer.timeline.create({
-           container: "#wave-timeline",
-           primaryColor: "white",
-           secondaryColor: "white",
-           primaryFontColor: "white",
-           secondaryFontColor: "white"
-        }),
-        WaveSurfer.cursor.create({
-           showTime: true,
-           opacity: 1,
-           customShowTimeStyle: {
-               'background-color': '#000',
-               color: '#fff',
-               padding: '0.2em',
-               'font-size': '12px'
-           },
-           formatTimeCallback: (num) => {
-              return minutize(num);
-           }
-        }),
-     ],
-  });
-
-  wavesurfer.load(audio);
-
-  // wavesurfer events
-
-  wavesurfer.on('region-click', function(region, e) { // play region audio on click
-     e.stopPropagation();
-     regionMouseEvent(region, true);
-     wavesurfer.play(region.start); // plays from start of region
-     // region.play(); // plays region only
-  });
-
-  wavesurfer.on('region-mouseenter', function(region) { regionMouseEvent(region, true); });
-  wavesurfer.on('region-mouseleave', function(region) { if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) regionMouseEvent(region, false); });
-  wavesurfer.on('region-in', function(region) { 
-     regionMouseEvent(region, true); 
-     if (itemType == "chapter") {
-        document.getElementById("chapter" + region.id.replace("region", "")).scrollIntoView({
-           behavior: "smooth",
-           block: "center"
-        });
-     }
-  });
-  wavesurfer.on('region-out', function(region) { regionMouseEvent(region, false); });
-
-  var loader = document.createElement("span"); // loading audio element
-  loader.innerHTML = "Loading audio";
-  loader.id = "waveform-loader";
-  document.querySelector("#waveform wave").prepend(loader);
-
-  wavesurfer.on('waveform-ready', function() { // retrieve regions once waveforms have loaded
-     if (inputFile.endsWith("csv")) { // diarization if csv
-        itemType = "chapter";
-        loadCSVFile(inputFile, ["speaker", "start", "end"]);
-     } else if (inputFile.endsWith("json")) { // transcription if json
-        itemType = "word";
-        loadJSONFile(inputFile);
-     } else {
-        console.log("Filetype of " + inputFile + " not supported.")
-     }
-     loader.remove(); // remove load text
-  })
-
-  // toolbar elements & event handlers
-  var chapters = document.getElementById("chapters");
-  var chapterButton = document.getElementById("chapterButton");
-  var backButton = document.getElementById("backButton");
-  var playPauseButton = document.getElementById("playPauseButton");
-  var forwardButton = document.getElementById("forwardButton");
-  var muteButton = document.getElementById("muteButton");
-  var zoomSlider = document.getElementById("slider");
-  chapters.style.height = "0px";
-  chapterButton.addEventListener("click", function() { toggleChapters(); });
-  backButton.addEventListener("click", function() { wavesurfer.skipBackward(); });
-  playPauseButton.addEventListener("click", function() { wavesurfer.playPause() });
-  forwardButton.addEventListener("click", function() { wavesurfer.skipForward(); });
-  muteButton.addEventListener("click", function() { wavesurfer.toggleMute(); });
-  zoomSlider.style["accent-color"] = accentColour; 
-
-  // path to toolbar images
-  var interface_bootstrap_images = "interfaces/" + gs.xsltParams.interface_name + "/images/bootstrap/";
-
-  wavesurfer.on("play", function() { playPauseButton.src = interface_bootstrap_images + "pause.svg"; });
-  wavesurfer.on("pause", function() { playPauseButton.src = interface_bootstrap_images + "play.svg"; });
-  wavesurfer.on("mute", function(mute) { 
-     if (mute) {
-        muteButton.src = interface_bootstrap_images + "mute.svg"; 
-        muteButton.style.opacity = 0.6;
-     }
-     else {
-        muteButton.src = interface_bootstrap_images + "unmute.svg"; 
-        muteButton.style.opacity = 1;
-     } 
-  });
-
-  zoomSlider.oninput = function () { // slider changes waveform zoom
-     wavesurfer.zoom(Number(this.value) / 4); 
-  };
-  wavesurfer.zoom(zoomSlider.value / 4); // set default zoom point
-
-  var toggleChapters = function() { // show & hide chapter section
-     if (chapters.style.height == "0px") {
-        chapters.style.height = "30vh";
-     } else {
-        chapters.style.height = "0px";
-     }
-  }
-
-  function loadCSVFile(filename, manualHeader) { // based around: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
-     $.ajax({
-        type: "GET",
-        url: filename,
-        dataType: "text",
-     }).then(function(data) {
-        var dataLines = data.split(/\r\n|\n/);
-        var headers;
-        var startIndex;
-        uniqueSpeakers = []; // used for obtaining unique colours
-        speakerObjects = []; // list of speaker items
-
-        if (manualHeader) { // headers for columns can be provided if not existent in csv
-           headers = manualHeader;
-           startIndex = 0;
-        } else {
-           headers = dataLines[0].split(',');
-           startIndex = 1;
-        }
-
-        for (var i = startIndex; i < dataLines.length; i++) {
-           var data = dataLines[i].split(',');
-           if (data.length == headers.length) {
-              var item = {};
-              for (var j = 0; j < headers.length; j++) {
-                 item[headers[j]] = data[j];
-                 if (j == 0) {
-                    if (!uniqueSpeakers.includes(data[j])) {
-                       uniqueSpeakers.push(data[j]);
-                    }
-                 }
-              }
-              speakerObjects.push(item);
-           }
-        }
-        populateChapters(speakerObjects);
-     });
-  }
-
-  function populateChapters(data) { // populates chapter section and adds regions to waveform
-     // colorbrewer is a web tool for guidance in choosing map colour schemes based on a variety of settings.
-     // this colour scheme is designed for qualitative data
-     colourbrewerset = colorbrewer.Set2[uniqueSpeakers.length];
-     for (var i = 0; i < data.length; i++) {
-        var chapter = document.createElement("div");
-        chapter.id = "chapter" + i;
-        chapter.classList.add("chapter");
-        chapter.innerHTML = data[i].speaker + "<span class='speakerTime' id='" + "chapter" + i + "'>" + minutize(data[i].start) + " - " + minutize(data[i].end) + "</span>";
-        chapter.addEventListener("click", e => { chapterClicked(e.target.id) });
-        chapter.addEventListener("mouseover", e => { chapterEnter(e.target.id) });
-        chapter.addEventListener("mouseleave", e => { chapterLeave(e.target.id) });
-        chapters.appendChild(chapter);
-        wavesurfer.addRegion({
-           id: "region" + i,
-           start: data[i].start,
-           end: data[i].end,
-           drag: false,
-           resize: false,
-           color: colourbrewerset[uniqueSpeakers.indexOf(data[i].speaker)] + regionTransparency,
-        });
-     }
-  }
-
-  function loadJSONFile(filename) {
-     $.ajax({
-        type: "GET",
-        url: filename,
-        dataType: "text",
-     }).then(function(data){ populateWords(JSON.parse(data)) });
-  }
-
-  function populateWords(data) { // populates word section and adds regions to waveform
-     var transcription = data.transcription;
-     var words = data.words;
-     var wordContainer = document.createElement("div");
-     wordContainer.id = "word-container";
-     for (var i = 0; i < words.length; i++) {
-        var word = document.createElement("span");
-        word.id = "word" + i;
-        word.classList.add("word");
-        word.innerHTML = transcription.split(" ")[i];
-        word.addEventListener("click", e => { wordClicked(data, e.target.id) });
-        word.addEventListener("mouseover", e => { chapterEnter(e.target.id) });
-        word.addEventListener("mouseleave", e => { chapterLeave(e.target.id) });
-        wordContainer.appendChild(word);
-        wavesurfer.addRegion({
-           id: "region" + i,
-           start: words[i].startTime,
-           end: words[i].endTime,
-           drag: false,
-           resize: false,
-           color: "rgba(255, 255, 255, 0.1)",
-        });
-     }
-     chapters.appendChild(wordContainer);
-  }
-
-  var chapterClicked = function(id) { // plays audio from start of chapter
-     var index = id.replace("chapter", "");
-     var start = speakerObjects[index].start;
-     var end = speakerObjects[index].end;
-     // wavesurfer.play(start, end);
-     wavesurfer.play(start);
-  }
-
-  function wordClicked(data, id) { // plays audio from start of word
-     var index = id.replace("word", "");
-     var start = data.words[index].startTime;
-     var end = data.words[index].endTime;
-     // wavesurfer.play(start, end);
-     wavesurfer.play(start);
-  }
-
-  function chapterEnter(id) {
-     regionEnter(wavesurfer.regions.list["region" + id.replace(itemType, "")]);
-  }
-
-  function chapterLeave(id) {
-     regionLeave(wavesurfer.regions.list["region" + id.replace(itemType, "")]);
-  }
-
-  function regionMouseEvent(region, highlight) { // handles region, chapter & word colours
-     var colour;
-     if (highlight) {
-        colour = "rgb(101, 116, 116)";
-        regionEnter(region);
-     } else {
-        colour = "";
-        regionLeave(region);
-     }
-     var regionIndex = region.id.replace("region","");
-     var corrItem = document.getElementById(itemType + regionIndex);
-     corrItem.style.backgroundColor = colour;
-  }
-
-  function regionEnter(region) {
-     region.update({ color: "rgba(255, 255, 255, 0.35)" });
-  }
-
-  function regionLeave(region) { 
-     if (itemType == "chapter") {
-        if (!(wavesurfer.getCurrentTime() + 0.1 < region.end && wavesurfer.getCurrentTime() > region.start)) {
-           var index = region.id.replace("region", "");
-           region.update({ color: colourbrewerset[uniqueSpeakers.indexOf(speakerObjects[index].speaker)] + regionTransparency });
-        }
-     } else {
-        region.update({ color: "rgba(255, 255, 255, 0.1)" });
-     }
-  }
-
-  function minutize(num) { // converts seconds to m:ss
-     var seconds = Math.round(num % 60);
-     if (seconds.toString().length == 1) seconds = "0" + seconds;
-     return Math.floor(num / 60) + ":" + seconds;
-  }
-}
+   var speakerObjects = [];
+   var uniqueSpeakers;
+   const inputFile = sectionData;
+   var itemType;
+
+   var accentColour = "#4CA72D";
+   // var accentColour = "#F8C537";
+   var regionTransparency = "59";
+
+   var waveformContainer = document.getElementById("waveform");
+   
+   var wavesurfer = WaveSurfer.create({ // wavesurfer options
+      container: waveformContainer,
+      backend: "MediaElement",
+      backgroundColor: "rgb(54, 73, 78)",
+      waveColor: "white",
+      progressColor: ["white", accentColour],
+      barWidth: 2,
+      barHeight: 1.2,
+      barGap: 2,
+      barRadius: 1,
+      cursorColor: 'black',
+      plugins: [
+         WaveSurfer.regions.create(),
+         WaveSurfer.timeline.create({
+            container: "#wave-timeline",
+            secondaryColor: "white",
+            secondaryFontColor: "white",
+            notchPercentHeight: "0",
+            fontSize: "12"
+         }),
+         WaveSurfer.cursor.create({
+            showTime: true,
+            opacity: 1,
+            customShowTimeStyle: {
+                'background-color': '#000',
+                color: '#fff',
+                padding: '0.2em',
+                'font-size': '12px'
+            },
+            formatTimeCallback: (num) => { return minutize(num); }
+         }),
+      ],
+   });
+
+   wavesurfer.load(audio);
+
+   // wavesurfer events
+
+   wavesurfer.on('region-click', function(region, e) { // play region audio on click
+      e.stopPropagation();
+      handleRegionColours(region, true);
+      wavesurfer.play(region.start); // plays from start of region
+      // region.play(); // plays region only
+   });
+
+   wavesurfer.on('region-mouseenter', function(region) { handleRegionColours(region, true); });
+   wavesurfer.on('region-mouseleave', function(region) { if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) handleRegionColours(region, false); });
+   wavesurfer.on('region-in', function(region) { 
+      handleRegionColours(region, true); 
+      if (itemType == "chapter") {
+         document.getElementById("chapter" + region.id.replace("region", "")).scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+         });
+      }
+   });
+   wavesurfer.on('region-out', function(region) { handleRegionColours(region, false); });
+
+   var loader = document.createElement("span"); // loading audio element
+   loader.innerHTML = "Loading audio";
+   loader.id = "waveform-loader";
+   document.querySelector("#waveform wave").prepend(loader);
+
+   wavesurfer.on('waveform-ready', function() { // retrieve regions once waveforms have loaded
+      if (inputFile.endsWith("csv")) { // diarization if csv
+         itemType = "chapter";
+         loadCSVFile(inputFile, ["speaker", "start", "end"]);
+      } else if (inputFile.endsWith("json")) { // transcription if json
+         itemType = "word";
+         loadJSONFile(inputFile);
+      } else {
+         console.log("Filetype of " + inputFile + " not supported.")
+      }
+      loader.remove(); // remove load text
+   });
+
+   function downloadURI(loc, name) 
+   {
+      var link = document.createElement("a");
+      link.download = name;
+      link.href = loc;
+      link.click();
+   }
+
+   // toolbar elements & event handlers
+   var chapters = document.getElementById("chapters");
+   var chapterButton = document.getElementById("chapterButton");
+   var backButton = document.getElementById("backButton");
+   var playPauseButton = document.getElementById("playPauseButton");
+   var forwardButton = document.getElementById("forwardButton");
+   var downloadButton = document.getElementById("downloadButton");
+   var muteButton = document.getElementById("muteButton");
+   var zoomSlider = document.getElementById("slider");
+   chapters.style.height = "0px";
+   chapterButton.addEventListener("click", function() { toggleChapters(); });
+   backButton.addEventListener("click", function() { wavesurfer.skipBackward(); });
+   playPauseButton.addEventListener("click", function() { wavesurfer.playPause() });
+   forwardButton.addEventListener("click", function() { wavesurfer.skipForward(); });
+   // audio = /greenstone3/library/sites/localsite/collect/tiriana-audio/index/assoc/HASHa6b7.dir/Te_Kakano_CH09_B.mp3
+   downloadButton.addEventListener("click", function() { downloadURI(audio, audio.split(".dir/")[1]) }); 
+   muteButton.addEventListener("click", function() { wavesurfer.toggleMute(); });
+   zoomSlider.style["accent-color"] = accentColour; 
+
+   // path to toolbar images
+   var interface_bootstrap_images = "interfaces/" + gs.xsltParams.interface_name + "/images/bootstrap/";
+
+   wavesurfer.on("play", function() { playPauseButton.src = interface_bootstrap_images + "pause.svg"; });
+   wavesurfer.on("pause", function() { playPauseButton.src = interface_bootstrap_images + "play.svg"; });
+   wavesurfer.on("mute", function(mute) { 
+      if (mute) {
+         muteButton.src = interface_bootstrap_images + "mute.svg"; 
+         muteButton.style.opacity = 0.6;
+      }
+      else {
+         muteButton.src = interface_bootstrap_images + "unmute.svg"; 
+         muteButton.style.opacity = 1;
+      } 
+   });
+
+   zoomSlider.oninput = function () { // slider changes waveform zoom
+      wavesurfer.zoom(Number(this.value) / 4); 
+   };
+   wavesurfer.zoom(zoomSlider.value / 4); // set default zoom point
+
+   var toggleChapters = function() { // show & hide chapter section
+      if (chapters.style.height == "0px") {
+         chapters.style.height = "30vh";
+      } else {
+         chapters.style.height = "0px";
+      }
+   }
+
+   function loadCSVFile(filename, manualHeader) { // based around: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
+      $.ajax({
+         type: "GET",
+         url: filename,
+         dataType: "text",
+      }).then(function(data) {
+         var dataLines = data.split(/\r\n|\n/);
+         var headers;
+         var startIndex;
+         uniqueSpeakers = []; // used for obtaining unique colours
+         speakerObjects = []; // list of speaker items
+
+         if (manualHeader) { // headers for columns can be provided if not existent in csv
+            headers = manualHeader;
+            startIndex = 0;
+         } else {
+            headers = dataLines[0].split(',');
+            startIndex = 1;
+         }
+
+         for (var i = startIndex; i < dataLines.length; i++) {
+            var data = dataLines[i].split(',');
+            if (data.length == headers.length) {
+               var item = {};
+               for (var j = 0; j < headers.length; j++) {
+                  item[headers[j]] = data[j];
+                  if (j == 0) {
+                     if (!uniqueSpeakers.includes(data[j])) {
+                        uniqueSpeakers.push(data[j]);
+                     }
+                  }
+               }
+               speakerObjects.push(item);
+            }
+         }
+         populateChapters(speakerObjects);
+      });
+   }
+
+   function populateChapters(data) { // populates chapter section and adds regions to waveform
+      // colorbrewer is a web tool for guidance in choosing map colour schemes based on a variety of settings.
+      // this colour scheme is designed for qualitative data
+
+      if (uniqueSpeakers.length > 8) colourbrewerset = colorbrewer.Set2[8];
+      else if (uniqueSpeakers.length < 3) colourbrewerset = colorbrewer.Set2[3];
+      else  colourbrewerset = colorbrewer.Set2[uniqueSpeakers.length];
+
+      for (var i = 0; i < data.length; i++) {
+         var chapter = document.createElement("div");
+         var speakerLetter = getLetter(data[i]);
+         chapter.id = "chapter" + i;
+         chapter.classList.add("chapter");
+         chapter.innerHTML = "Speaker " + speakerLetter + "<span class='speakerTime' id='" + "chapter" + i + "'>" + minutize(data[i].start) + " - " + minutize(data[i].end) + "</span>";
+         chapter.addEventListener("click", e => { chapterClicked(e.target.id) });
+         chapter.addEventListener("mouseover", e => { chapterEnter(e.target.id) });
+         chapter.addEventListener("mouseleave", e => { chapterLeave(e.target.id) });
+         chapters.appendChild(chapter);
+         // console.log("index: " + uniqueSpeakers.indexOf(data[i].speaker)%8);
+         // console.log("colour: " + colourbrewerset[uniqueSpeakers.indexOf(data[i].speaker)%8]);
+         wavesurfer.addRegion({
+            id: "region" + i,
+            start: data[i].start,
+            end: data[i].end,
+            drag: false,
+            resize: false,
+            color: colourbrewerset[uniqueSpeakers.indexOf(data[i].speaker)%8] + regionTransparency,
+         });
+      }
+   }
+
+   function loadJSONFile(filename) {
+      $.ajax({
+         type: "GET",
+         url: filename,
+         dataType: "text",
+      }).then(function(data){ populateWords(JSON.parse(data)) });
+   }
+
+   function populateWords(data) { // populates word section and adds regions to waveform
+      var transcription = data.transcription;
+      var words = data.words;
+      var wordContainer = document.createElement("div");
+      wordContainer.id = "word-container";
+      for (var i = 0; i < words.length; i++) {
+         var word = document.createElement("span");
+         word.id = "word" + i;
+         word.classList.add("word");
+         word.innerHTML = transcription.split(" ")[i];
+         word.addEventListener("click", e => { wordClicked(data, e.target.id) });
+         word.addEventListener("mouseover", e => { chapterEnter(e.target.id) });
+         word.addEventListener("mouseleave", e => { chapterLeave(e.target.id) });
+         wordContainer.appendChild(word);
+         wavesurfer.addRegion({
+            id: "region" + i,
+            start: words[i].startTime,
+            end: words[i].endTime,
+            drag: false,
+            resize: false,
+            color: "rgba(255, 255, 255, 0.1)",
+         });
+      }
+      chapters.appendChild(wordContainer);
+   }
+
+   var chapterClicked = function(id) { // plays audio from start of chapter
+      var index = id.replace("chapter", "");
+      var start = speakerObjects[index].start;
+      var end = speakerObjects[index].end;
+      // wavesurfer.play(start, end);
+      wavesurfer.play(start);
+   }
+
+   function wordClicked(data, id) { // plays audio from start of word
+      var index = id.replace("word", "");
+      var start = data.words[index].startTime;
+      var end = data.words[index].endTime;
+      // wavesurfer.play(start, end);
+      wavesurfer.play(start);
+   }
+
+   function chapterEnter(id) {
+      regionEnter(wavesurfer.regions.list["region" + id.replace(itemType, "")]);
+   }
+
+   function chapterLeave(id) {
+      regionLeave(wavesurfer.regions.list["region" + id.replace(itemType, "")]);
+   }
+
+   function handleRegionColours(region, highlight) { // handles region, chapter & word colours
+      var colour;
+      if (highlight) {
+         colour = "rgb(101, 116, 116)";
+         regionEnter(region);
+      } else {
+         colour = "";
+         regionLeave(region);
+      }
+      var regionIndex = region.id.replace("region","");
+      var corrItem = document.getElementById(itemType + regionIndex);
+      corrItem.style.backgroundColor = colour;
+   }
+
+   function regionEnter(region) {
+      region.update({ color: "rgba(255, 255, 255, 0.35)" });
+   }
+
+   function regionLeave(region) { 
+      if (itemType == "chapter") {
+         if (!(wavesurfer.getCurrentTime() + 0.1 < region.end && wavesurfer.getCurrentTime() > region.start)) {
+            var index = region.id.replace("region", "");
+            region.update({ color: colourbrewerset[uniqueSpeakers.indexOf(speakerObjects[index].speaker)%8] + regionTransparency });
+         }
+      } else {
+         region.update({ color: "rgba(255, 255, 255, 0.1)" });
+      }
+   }
+
+   function minutize(num) { // converts seconds to m:ss for chapters & waveform hover
+      var seconds = Math.round(num % 60);
+      if (seconds.toString().length == 1) seconds = "0" + seconds;
+      return Math.floor(num / 60) + ":" + seconds;
+   }
+
+   function getLetter(val) {
+      var speakerNum = parseInt(val.speaker.replace("SPEAKER_",""));
+      return String.fromCharCode(65 + speakerNum); // 'A' == UTF-16 65
+   }
+}
+
+function formatAudioDuration(duration) {
+   console.log(duration);
+   var [hrs, mins, secs, ms] = duration.replace(".", ":").split(":");
+   return hrs + ":" + mins + ":" + secs;
+}
Index: /main/trunk/greenstone3/web/interfaces/default/style/core.css
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 36216)
+++ /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 36217)
@@ -1386,6 +1386,6 @@
 
 #audioContainer {
-    width: 65vw;
-    background-color: rgb(24, 36, 39);
+    width: 100%;
+    /* background-color: rgb(24, 36, 39); */
 	scrollbar-color: white transparent;
 }
@@ -1396,4 +1396,5 @@
 
 #toolbar {
+	background-color: rgb(24, 36, 39);
     position: relative;
     display: flex;
@@ -1428,5 +1429,5 @@
 
 #chapters {
-    width: 100%;
+    width: 50%;
     height: 0;
     max-height: 30vh;
@@ -1458,11 +1459,12 @@
 }
 
-#muteButton {
-    padding-left: 1em;
+#downloadButton {
+	transform: scale(0.8);
+	padding-right: 0.75em;
 }
 
 .wavesurfer-region {
     cursor: pointer !important;
-    /* border: 1px solid white !important; */
+    /* border: 1px solid rgba(255, 255, 255, 0.3) !important; */
     transition: 0.1s ease;
 }
@@ -1481,5 +1483,9 @@
 #zoomIcon {
     width: 1.2em !important;
+}
+
+#chapterButton {
 	padding-left: 0.2em;
+	padding-right: 0.75em;
 }
 
@@ -1507,6 +1513,10 @@
 }
 
+wave {
+	width: 100%;
+}
+
 .toolbar-section {
-    width: 12em;
+    width: 33%;
 }
 
@@ -1536,9 +1546,13 @@
 #tapeDetails {
 	border: 1px solid olive;
+	min-width: 30%;
 }
 
 #tapeDetails td {
 	padding: 0.2em;
-
+}
+
+#tapeDetails td:nth-child(1) {
+	padding-right: 6em;
 }
 
@@ -1546,6 +1560,2 @@
 	background-color: darkseagreen;
 }
-
-#fCol {
-	padding-right: 5em;
-}
