refactoring

gctGenerator.js

@@ -1,21 +1,20 @@
 if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
-   HTMLElement.prototype.click = function() {
+   HTMLElement.prototype.click = function () {
       var evt = this.ownerDocument.createEvent("MouseEvents");
       evt.initMouseEvent("click", true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
       this.dispatchEvent(evt);
    }
 }
 
-document.getElementById("checklist").addEventListener("click", function(ev) {
+document.getElementById("codelist").addEventListener("click", function (ev) {
-   if (ev.target && ev.target.nodeName == "LI") {
+   if (ev.target && ev.target.nodeName.toUpperCase() === "LI")
       ev.target.classList.toggle("checked");
-  }
 });
 
 function parseXML(name) {
    var xml = new XMLHttpRequest();
    var file = "codes/" + name + ".xml";
-  xml.onreadystatechange = function() {
+   xml.onreadystatechange = function () {
       if (this.status == 200 && this.readyState == 4) {
          var xmlData = xml.responseXML;
          xmlData = (new DOMParser()).parseFromString(xml.responseText, "text/xml");
@@ -33,14 +32,14 @@ function parseXML(name) {
             li.setAttribute("data-codeversion", btoa(xmlData[i].getElementsByTagName("version")[0].textContent));
             li.setAttribute("data-codedate", btoa(xmlData[i].getElementsByTagName("date")[0].textContent));
             li.setAttribute("data-codesrc", btoa(xmlData[i].getElementsByTagName("source")[0].textContent.replace(/[\s\n\r\t]+/gm, "")));
-        li.setAttribute("onmouseover", "updateDescription(this)");
+            li.setAttribute("onmouseover", "updateCodeDescription(this)");
-        document.getElementById("checklist").appendChild(li);
+            document.getElementById("codelist").appendChild(li);
          }
 
          var buttons = document.getElementsByTagName("button");
          for (var i = 0; i < buttons.length; i++) buttons[i].disabled = false;
 
-      document.getElementById("gameversion").disabled = false;
+         document.getElementById("sel-gamever").disabled = false;
       }
    };
 
@@ -48,43 +47,49 @@ function parseXML(name) {
    xml.send();
 }
 
+function toggleFastCode() {
+   document.getElementById("cc").classList.toggle("hidden");
+}
+
 function updateFastCode(name) {
    var xml = new XMLHttpRequest();
-   var file = "codes/fast/" + name + ".json";
+
-   xml.onreadystatechange = function() {
+   xml.onreadystatechange = function () {
       if (this.status == 200 && this.readyState == 4) {
          document.getElementById("route_levels").setAttribute("data-json", btoa(xml.responseText));
       }
    }
-   xml.open("GET",file);
+
+   xml.open("GET", "codes/fast/" + name + ".json");
    xml.send();
 }
 
 function downloadFile(data, filename) {
-
    var file = new Blob([data], {
       type: "application/octet-stream"
    });
 
-   if (window.navigator.msSaveOrOpenBlob) window.navigator.msSaveOrOpenBlob(file, filename.replace("GMSJ0A","GMSJ01"));
+   if (window.navigator.msSaveOrOpenBlob) window.navigator.msSaveOrOpenBlob(file, filename.replace("GMSJ0A", "GMSJ01"));
    else {
       var a = document.createElement("a"),
          url = window.URL.createObjectURL(file);
       a.href = url;
-      a.download = filename.replace("GMSJ0A","GMSJ01");
+      a.download = filename.replace("GMSJ0A", "GMSJ01");
       a.click();
-      setTimeout(function() { window.URL.revokeObjectURL(url); }, 500);
+      setTimeout(function () {
+         window.URL.revokeObjectURL(url);
+      }, 500);
    }
 }
 
 function generateGCT() {
 
-   if (document.getElementById("gameversion").value === "Choose Version") {
+   if (document.getElementById("sel-gamever").value === "Choose Version") {
       alert("Select the game version!");
       return;
    }
    var data = "00D0C0DE00D0C0DE";
-   var codeList = document.getElementById("checklist").getElementsByTagName("li");
+   var codeList = document.getElementById("codelist").getElementsByTagName("li");
    var valueSelected = false;
    for (var i = 0; i < codeList.length; i++) {
       if (codeList[i].className === "checked") {
@@ -95,7 +100,7 @@ function generateGCT() {
 
    var fastcode = getFastCode();
 
-   if(fastcode !== false) {
+   if (fastcode !== false) {
       data += fastcode;
       valueSelected = true;
    }
@@ -108,7 +113,7 @@ function generateGCT() {
          rawData[x] = parseInt(data.substr(x * 2, 2), 16);
       }
 
-      downloadFile(rawData, document.getElementById("gameversion").value + ".gct");
+      downloadFile(rawData, document.getElementById("sel-gamever").value + ".gct");
    } else {
       alert("No cheat(s) selected!");
    }
@@ -116,15 +121,15 @@ function generateGCT() {
 
 function generateTXT() {
 
-   var dolphin = (document.getElementById("downloadformat").value === "ini");
+   var dolphin = (document.getElementById("sel-format").value === "ini");
 
-   if (document.getElementById("gameversion").value === "Choose Version") {
+   if (document.getElementById("sel-gamever").value === "Choose Version") {
       alert("Select the game version!");
       return;
    }
    if (dolphin) var data = "Paste the following on top of your games .ini file:\r\n[Gecko]";
-   else var data = document.getElementById("gameversion").value.replace("GMSJ0A","GMSJ01") + "\r\nSuper Mario Sunshine";
+   else var data = document.getElementById("sel-gamever").value.replace("GMSJ0A", "GMSJ01") + "\r\nSuper Mario Sunshine";
-   var codeList = document.getElementById("checklist").getElementsByTagName("li");
+   var codeList = document.getElementById("codelist").getElementsByTagName("li");
    var valueSelected = false;
    for (var i = 0; i < codeList.length; i++) {
       if (codeList[i].className === "checked") {
@@ -139,7 +144,7 @@ function generateTXT() {
 
    var fastcode = getFastCode();
 
-   if(fastcode !== false) {
+   if (fastcode !== false) {
       data += "\r\n";
       if (dolphin) data += "$";
       else data += "\r\n";
@@ -149,31 +154,43 @@ function generateTXT() {
    }
 
    if (valueSelected)
-   downloadFile(data, document.getElementById("gameversion").value + ".txt");
+      downloadFile(data, document.getElementById("sel-gamever").value + ".txt");
    else alert("No cheat(s) selected!");
 }
 
 function downloadCodes() {
-   if (document.getElementById("downloadformat").value === "gct") generateGCT();
+   if (document.getElementById("sel-format").value === "gct") generateGCT();
    else generateTXT();
 }
 
 function updateCodelist() {
+   disableButtons();
+   document.getElementById("sel-gamever").disabled = true;
+
    resetDescription();
-   document.getElementById("gameversion").disabled = true;
+   document.getElementById("codelist").innerHTML = "";
-   var buttons = document.getElementsByTagName("button");
+
-   for (var i = 0; i < buttons.length; i++) buttons[i].disabled = true;
+   let gameVersion = document.getElementById("sel-gamever").value;
-   document.getElementById("checklist").innerHTML = "";
-   var gameVersion = document.getElementById("gameversion").value;
    parseXML(gameVersion);
    updateFastCode(gameVersion);
-   document.getElementById("left").style.visibility = "visible";
+
-   while (document.getElementsByClassName("initialhidden").length > 0) {
+   toggleHiddenContainers();
-      document.getElementsByClassName("initialhidden")[0].classList.remove("initialhidden");
+}
+
+function disableButtons() {
+   var buttons = document.getElementsByTagName("button");
+   for (var i = 0; i < buttons.length; i++) buttons[i].disabled = true;
+}
+
+function toggleHiddenContainers() {
+   let hiddenElements = document.querySelectorAll(".hidden");
+
+   for (let i = 0; i < hiddenElements.length; i++) {
+      if (hiddenElements[i].id !== "cc") hiddenElements[i].classList.remove("hidden");
    }
 }
 
-function updateDescription(s) {
+function updateCodeDescription(s) {
    document.getElementById("descriptionbox").innerHTML = "<h2>" +
       atob(s.getAttribute("data-codename")) + "</h2><p style=\"margin-top:0\"><i>Author(s): " +
       atob(s.getAttribute("data-codeauthor")) + "</i></p><p style=\"margin-top:0\"><i>Version: " +
@@ -183,18 +200,8 @@ function updateDescription(s) {
 }
 
 function updateUIDescription(s) {
-   if (s.id === "route_notext")
+   if (s && s.getAttribute("data-description"))
-      document.getElementById("descriptionbox").innerHTML = "<h2>Remove Dialogue</h2><p>Replaces all Dialogue with \"!!!\". 'Always' and 'Not in Pianta 5' will override the dialogue skip from the DPad Functions.</p>";
+      document.getElementById("descriptionbox").innerHTML = s.getAttribute("data-description");
-   else if (s.id === "route_nofmvs")
-      document.getElementById("descriptionbox").innerHTML = "<h2>Skippable Cutscenes</h2><p>Makes FMVs skippable. 'Always' has the same effect as the 'FMV Skips' code. Also, having 'FMV Skips' enabled will override 'Not in Pinna' - so don't use both simultaneously.</p>";
-   else if (s.id === "route_order")
-      document.getElementById("descriptionbox").innerHTML = "<h2>Level Order</h2><p>The order in which levels are loaded:</p><h4>As specified</h4><p>The code loads levels in the order of the list.</p><h4>Random, no duplicates</h4><p>The code picks levels at random, excluding levels that you’ve finished already.</p><h4>Fully random</h4><p>The code picks levels at random, even levels that you’ve finished already.</p>";
-   else if (s.id === "route_ending")
-      document.getElementById("descriptionbox").innerHTML = "<h2>Route Ending</h2><p>What to do after you complete the final level on the list. This has no effect if the level order is set to Fully random.</p>";
-   else if (s.id === "downloadformat")
-      document.getElementById("descriptionbox").innerHTML = "<h2>File Format</h2><p>You can choose between 3 file formats:</p><h4>GCT</h4><p>Download a GCT file for use with Nintendont</p><h4>Dolphin INI</h4><p>Download a textfile containing the formatted codes for use with Dolphin. Copy the contents of the file on top of your games .ini file.</p><p>You can open the .ini file by right clicking the game in Dolphin. In the context menu select 'Properties' and then 'Edit configuration'.</p><h4>Cheat Manager TXT</h4><p>Download the cheats in a textfile formatted for use with the <a target=\"_blank\" href=\"http://wiibrew.org/wiki/CheatManager\">Gecko Cheat Manager</a>. Place the txt file in SD:/txtcodes/.</p><p>A zip archive containing pregenerated txt files with all available codes on this site can be downloaded <a target=\"_blank\" href=\"files/GCMCodes.zip\">here</a>.</p>";
-   else if (s.id === "stageloader")
-      document.getElementById("descriptionbox").innerHTML = "<h2>Stage Loader</h2><p>Select yes if you want to use a custom stage loader, which automatically loads the levels you choose, similiar to 'Fast Any%'.</p>";
 }
 
 function resetDescription() {
@@ -202,10 +209,9 @@ function resetDescription() {
 }
 
 function updateChangelog() {
-   document.getElementById("gameversion").style.visibility = "visible";
+   document.getElementById("sel-gamever").style.visibility = "visible";
    var xml = new XMLHttpRequest();
-   var file = "changelog.xml";
+   xml.onload = function () {
-   xml.onload = function() {
       if (this.status == 200 && this.responseXML != null) {
          var changelogData = xml.responseXML;
          changelogData = (new DOMParser()).parseFromString(xml.responseText, "text/xml");
@@ -215,8 +221,8 @@ function updateChangelog() {
          try {
             document.getElementById("lastupdate").innerHTML = "Last Updated: " + changelogData[0].getElementsByTagName("date")[0].textContent;
 
-            for (var i = 0, changeCount = 0; i < changelogData.length && changeCount < 3;i++) {
+            for (var i = 0, changeCount = 0; i < changelogData.length && changeCount < 3; i++) {
-               recentchanges += "<p style=\"margin-top:0\"><i>" + changelogData[i].getElementsByTagName("date")[0].textContent + ": ";
+               recentchanges += "<div class=\"change\"><div><i>" + changelogData[i].getElementsByTagName("date")[0].textContent + ": </i></div><div><i>";
 
                var changes = changelogData[i].getElementsByTagName("change");
                for (var k = 0; k < changes.length && changeCount < 3; k++) {
@@ -224,27 +230,29 @@ function updateChangelog() {
                   ++changeCount;
                }
 
-               recentchanges += "</i></p>";
+               recentchanges += "</i></div></div>";
             }
          } catch (err) {}
 
-         document.getElementById("changelog").innerHTML += recentchanges + "<p style=\"margin-top:0\"><a target=\"_blank\" href=\"changelog.html\"><i>more ...</i></a></p>";
+         document.getElementById("changelog").innerHTML += recentchanges + "<div class=\"change\"><a target=\"_blank\" href=\"changelog.html\"><i>more ...</i></a></div>";
       };
    }
 
-   xml.open("GET", file);
+   xml.open("GET", "changelog.xml");
    xml.send();
 }
 
 /****************************
-*
+ *
-*  Fastcode, https://github.com/QbeRoot/fastcodes/blob/master/script.js
+ *  Fastcode, https://github.com/QbeRoot/fastcodes/blob/master/script.js
-*
+ *
-****************************/
+ ****************************/
 
 const levels = document.querySelector("#route_levels");
 const template = levels.lastElementChild;
-template.ondragstart = function() { return false; };
+template.ondragstart = function () {
+   return false;
+};
 
 function appendLevel(code) {
    const clone = template.cloneNode(true);
@@ -355,12 +363,16 @@ function getFastCode() {
    }
    levelCodes.pop();
 
-   if (!(document.getElementById("usefastcode").checked) || levelCodes.length === 0) return false;
+   if (!document.getElementById("sel-stageloader").value === "yes" || levelCodes.length === 0) return false;
 
    let game = JSON.parse(atob(document.getElementById("route_levels").getAttribute("data-json")));
    const order = document.getElementById("route_order").value;
    const ending = document.getElementById("route_ending").value;
-   const loadStageLength = {'list': 0x20, 'random': 0x2C, 'shuffle': 0x40}[order]
+   const loadStageLength = {
+      'list': 0x20,
+      'random': 0x2C,
+      'shuffle': 0x40
+   } [order]
    let codes = ''
 
    // Reset counter on file select
@@ -389,9 +401,14 @@ function getFastCode() {
       (0x40810000 + (loadStageLength & 0x0000FFFC)).toString(16) + '7C8802A6600000007CC802A67C8803A6'
 
    switch (order) {
-       case 'list':    codes += '3400FFFEB00300007CE6022E'; break
+      case 'list':
-       case 'random':  codes += '7C8C42E67CA403967CA501D67C8520505484003C7CE6222E'; break
+         codes += '3400FFFEB00300007CE6022E';
-       case 'shuffle': codes += '7C8C42E67CA403967CA501D67C8520505484003C3400FFFEB00300007CE6222E7CA6022E7CA6232E7CE6032E'
+         break
+      case 'random':
+         codes += '7C8C42E67CA403967CA501D67C8520505484003C7CE6222E';
+         break
+      case 'shuffle':
+         codes += '7C8C42E67CA403967CA501D67C8520505484003C3400FFFEB00300007CE6222E7CA6022E7CA6232E7CE6032E'
    }
 
    codes += 'B0E300023C60' + game.gpAppHi + 'B0E3' + game.gpAppLo + '806D' + game.fmOffset + '98E300DF4E800020' + (order === 'random' ? '' : '00000000')

guide.html

@@ -1,17 +1,20 @@
 <!DOCTYPE HTML>
 <html lang="en">
-   <head>
+
+<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="A guide on how to install and use practice codes for Super Mario Sunshine.">
-      <meta name="viewport" content="width=480px, initial-scale=1.0">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/guide.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Guide</title>
-   </head>
+</head>
-   <body>
+
+<body>
    <div id="guide_content" class="framed">
-      <h1 style="text-align:center;width:100%">How to install and use practice codes</h1>
+      <h1>How to install and use practice codes</h1>
-      <p style="margin:0;text-align:center;width:100%;">This page is a simple guide to explain the recommended way to install practice codes on your Nintendo Wii.</p>
+      <p class="center">This page is a simple guide to explain the recommended way to
+         install practice codes on your Nintendo Wii.</p>
       <br />
       <div id="indexlisting">
          <h3><a href="#1">1. Preparing your Wii</a></h3>
@@ -24,25 +27,41 @@
       <hr />
       <h2 id="1"><a href="#1">1. Preparing your Wii</a></h2>
       <h3 id="1.1"><a href="#1.1">1.1 Install Homebrew</a></h3>
-      <p>First of all you're gonna have to install Homebrew on your Wii. Make sure your SD card is <a target="_blank" href="https://superuser.com/questions/1179871/how-to-format-a-disk-sdcard-as-fat32-in-windows-10/1179872#1179872">formatted to FAT32</a> and then <a target="_blank" href="https://sites.google.com/site/completesg/hacking-guide">click this link</a> for a detailed guide on how to get Homebrew on your Wii. Ignore the "<i>So, what's next?</i>" section.</p>
+      <p>First of all you're gonna have to install Homebrew on your Wii. Make sure your SD card is <a target="_blank"
+            href="https://superuser.com/questions/1179871/how-to-format-a-disk-sdcard-as-fat32-in-windows-10/1179872#1179872">formatted
+            to FAT32</a> and then <a target="_blank" href="https://sites.google.com/site/completesg/hacking-guide">click
+            this link</a> for a detailed guide on how to get Homebrew on your Wii. Ignore the "<i>So, what's next?</i>"
+         section.</p>
       <br />
       <h3 id="1.2"><a href="#1.2">1.2 Install the necessary applications</a></h3>
-      <p>Using <a target="_blank" href="https://github.com/FIX94/Nintendont">Nintendont</a> is the recommended way to use practice codes. To download the most recent build you can <a target="_blank" href="http://zint.ch/nintendont/dl/recent.php">click this link</a>.</p>
+      <p>Using <a target="_blank" href="https://github.com/FIX94/Nintendont">Nintendont</a> is the recommended way to
-      <p>Unpack the archive and place the Nintendont folder with all of its contents in the "<i>apps</i>" folder of your SD card. If there is no "<i>apps</i>" folder create one in the root of your SD card.</p>
+         use practice codes. To download the most recent build you can <a target="_blank"
+            href="http://zint.ch/nintendont/dl/recent.php">click this link</a>.</p>
+      <p>Unpack the archive and place the Nintendont folder with all of its contents in the "<i>apps</i>" folder of your
+         SD card. If there is no "<i>apps</i>" folder create one in the root of your SD card.</p>
       <br />
       <hr />
       <h2 id="2"><a href="#2">2. Install and use the cheatfile</a></h2>
       <h3 id="2.1"><a href="#2.1">2.1 Generate the file</a></h3>
-      <p>Visit the <a target="_blank" href="index.html">main site</a> and select your game version from the dropdown menu. Then select all the cheats you want to have enabled from the list, choose GCT as file format and hit "Download". The name of the file you downloaded should be "GMSX01.gct" with X being E, P or J depending on the version you selected.</p>
+      <p>Visit the <a target="_blank" href="index.html">main site</a> and select your game version from the dropdown
+         menu. Then select all the cheats you want to have enabled from the list, choose GCT as file format and hit
+         "Download". The name of the file you downloaded should be "GMSX01.gct" with X being E, P or J depending on the
+         version you selected.</p>
       <br />
-      <p><i>Note: JP 1.0 and JP 1.1 both use the same ID (GMSJ01). To identify if you own JP 1.0 or 1.1 check the back of your disc. It'll read "DOL-GMSJ-0-00" for 1.0 and "DOL-GMSJ-0-01" for 1.1.</i></p>
+      <p><i>Note: JP 1.0 and JP 1.1 both use the same ID (GMSJ01). To identify if you own JP 1.0 or 1.1 check the back
+            of your disc. It'll read "DOL-GMSJ-0-00" for 1.0 and "DOL-GMSJ-0-01" for 1.1.</i></p>
       <br />
       <h3 id="2.2"><a href="#2.2">2.2 Copy the file onto your SD card</a></h3>
-      <p>Create a "<i>codes</i>" folder in the root of your SD card if there is none and copy the GCT file you just downloaded into that folder.</p>
+      <p>Create a "<i>codes</i>" folder in the root of your SD card if there is none and copy the GCT file you just
+         downloaded into that folder.</p>
       <br />
       <h3 id="2.3"><a href="#2.3">2.3 Use the codes</a></h3>
-      <p>Open your Homebrew channel and from there launch Nintendont. Select SD and then press B on your Gamecube controller to see the settings. In your settings, make sure that "<i>Cheats</i>" are "<i>On</i>". You can switch it on/off by pressing A on your controller. (See image below)</p>
+      <p>Open your Homebrew channel and from there launch Nintendont. Select SD and then press B on your Gamecube
-      <p style="text-align:center"><a target="_blank" href="img/nintendont_cheats.jpg"><img src="img/nintendont_cheats.jpg"  style="width:50%;min-width:300px;margin:20px 0px" alt="Nintendont" /></a></p>
+         controller to see the settings. In your settings, make sure that "<i>Cheats</i>" are "<i>On</i>". You can
+         switch it on/off by pressing A on your controller. (See image below)</p>
+      <p class="center"><a target="_blank" href="img/nintendont_cheats.jpg"><img src="img/nintendont_cheats.jpg"
+               style="width:50%;min-width:300px;margin:20px 0px" alt="Nintendont" /></a>
+      </p>
       <p>Press B again to return to the game list and launch your game. And with that you're done already.</p>
       <br />
       <hr />
@@ -63,17 +82,26 @@
       <div style="float:right;margin:0px 0px 10px 0px;">
          <p><i>Sample folder structure:</i></p>
          <br />
-         <p style="text-align:center"><img src="img/folderstructure.png" alt="Folder Structure" /></p>
+         <p class="center"><img src="img/folderstructure.png" alt="Folder Structure" /></p>
       </div>
       <p>This can have multiple reasons:</p>
       <ul>
          <li>You don't have cheats enabled: See <a href="#2.3">2.3</a> for details.</li>
          <li>You're using an obsolete version of Nintendont. Make sure you use version 4.434 or newer.</li>
-         <li>Your cheatfile has the wrong name: Make sure the file is named "GMSE01.gct", "GMSJ01.gct" or "GMSP01.gct". It won't work with names like "GMSE01 (1).gct". Nintendont is very picky!</li>
+         <li>Your cheatfile has the wrong name: Make sure the file is named "GMSE01.gct", "GMSJ01.gct" or "GMSP01.gct".
-         <li>Your cheatfile is at the wrong location: Make sure the file is in the "codes" folder of your SD Card. Again, the folder has to be named "codes" (See sample folder structure on the right). If you have a "games" folder, make sure there's no file with the same name in it or its subfolders.</li>
+            It won't work with names like "GMSE01 (1).gct". Nintendont is very picky!</li>
-         <li>Your cheatfile is too big: Using too many codes at once can cause Nintendont to disable them since the used space in the game is limited. Make sure you don't have two incompatible codes selected when downloading the cheatfile (for example "Level Select", "Fast Any%" and the Stage loader cannot be used simultaneously).<br /><br /><i><b>Note: If you're using Nintendont 4.434 or newer you don't have to worry unless your file is bigger than 8KB.</b></i></li>
+         <li>Your cheatfile is at the wrong location: Make sure the file is in the "codes" folder of your SD Card.
-         <li>If you have a USB drive connected and use disc, make sure you select the device that contains the cheats for your disc.</li>
+            Again, the folder has to be named "codes" (See sample folder structure on the right). If you have a "games"
-         <li>If you use an ISO your cheat file and ISO must be on the same device (both on the SD card or both on the USB drive).</li>
+            folder, make sure there's no file with the same name in it or its subfolders.</li>
+         <li>Your cheatfile is too big: Using too many codes at once can cause Nintendont to disable them since the used
+            space in the game is limited. Make sure you don't have two incompatible codes selected when downloading the
+            cheatfile (for example "Level Select", "Fast Any%" and the Stage loader cannot be used
+            simultaneously).<br /><br /><i><b>Note: If you're using Nintendont 4.434 or newer you don't have to worry
+                  unless your file is bigger than 8KB.</b></i></li>
+         <li>If you have a USB drive connected and use disc, make sure you select the device that contains the cheats
+            for your disc.</li>
+         <li>If you use an ISO your cheat file and ISO must be on the same device (both on the SD card or both on the
+            USB drive).</li>
       </ul>
       <br />
       <h3 id="3.4"><a href="#3.4">3.4 The site doesn't show codes or the download button</a></h3>
@@ -83,23 +111,43 @@
       <hr />
       <h2 id="4"><a href="#4">4. Appendix: Cheat Manager (Homebrew)</a></h2>
       <br />
-      <p>The Cheat Manager is a homebrew application that allows you to generate GCTs on your Wii. This way you don't have to redownload your cheatfile everytime you want a different combination. However, you're gonna have to use a Wiimote to control the application</p>
+      <p>The Cheat Manager is a homebrew application that allows you to generate GCTs on your Wii. This way you don't
+         have to redownload your cheatfile everytime you want a different combination. However, you're gonna have to use
+         a Wiimote to control the application</p>
       <h3 id="4.1"><a href="#4.1">4.1 Setup</a></h3>
-      <p>You can download the Cheat Manager from <a target="_blank" href="http://wiibrew.org/wiki/CheatManager" title="CheatManager - WiiBrew">WiiBrew</a>. Unzip the archive and copy the contents into the "<i>apps</i>" folder of your SD card.</p>
+      <p>You can download the Cheat Manager from <a target="_blank" href="http://wiibrew.org/wiki/CheatManager"
+            title="CheatManager - WiiBrew">WiiBrew</a>. Unzip the archive and copy the contents into the "<i>apps</i>"
+         folder of your SD card.</p>
       <br />
-      <p>Using the generator on the <a target="_blank" href="index.html">main site</a>, select all the codes you want to have available on the cheat manager and choose "<i>Cheat Manager TXT</i>" as file format instead of "<i>GCT</i>" to download a text file formatted for use with the cheat manager. Create a "<i>txtcodes</i>" folder in the root of your SD card if there is none and copy the generated text file into that folder. The name of the text file doesn't matter if you use this application, since the games ID is stored in the textfile.</p>
+      <p>Using the generator on the <a target="_blank" href="index.html">main site</a>, select all the codes you want to
+         have available on the cheat manager and choose "<i>Cheat Manager TXT</i>" as file format instead of
+         "<i>GCT</i>" to download a text file formatted for use with the cheat manager. Create a "<i>txtcodes</i>"
+         folder in the root of your SD card if there is none and copy the generated text file into that folder. The name
+         of the text file doesn't matter if you use this application, since the games ID is stored in the textfile.</p>
       <h3 id="4.2"><a href="#4.2">4.2 Using the Cheat Manager</a></h3>
-      <p>Launch the cheat manager and grab your Wiimote. Navigate to your textfile using the DPad and select it with "<i>A</i>". On the following screen press "<i>+</i>" to activate and "<i>-</i>" to deactivate a cheat.</p>
+      <p>Launch the cheat manager and grab your Wiimote. Navigate to your textfile using the DPad and select it with
+         "<i>A</i>". On the following screen press "<i>+</i>" to activate and "<i>-</i>" to deactivate a cheat.</p>
       <br />
-      <p>After activating your desired codes press "<i>1</i>" to generate the GCT file. The cheatmanager then creates the GCT file in your "<i>codes</i>" folder, overwriting the old one if there's already a GCT with the same name. If you now launch the game with cheats active the new codes will be loaded.</p>
+      <p>After activating your desired codes press "<i>1</i>" to generate the GCT file. The cheatmanager then creates
+         the GCT file in your "<i>codes</i>" folder, overwriting the old one if there's already a GCT with the same
+         name. If you now launch the game with cheats active the new codes will be loaded.</p>
       <br />
       <hr />
       <h2 id="5"><a href="#5">5. Appendix: Using the codes with Dolphin</a></h2>
       <h3 id="5.1"><a href="#5.1">5.1 Setup</a></h3>
-      <p>To use the codes with Dolphin choose "<i>Dolphin INI</i>" as file format instead of "<i>GCT</i>" to download the codes formatted for use with Dolphin. Then right click the game in Dolphin and click on "<i>Properties</i>" and on the bottom left corner of the property window click the "<i>Edit configuration</i>" button. Close the property window. Open the text file you downloaded and copy everything following the "<i>[Gecko]</i>" tag below the same tag in the configuration you just opened. If there is no "<i>[Gecko]</i>" tag (it should be the first tag), create one on top of your configuration file. Save and close the configuration file.</p>
+      <p>To use the codes with Dolphin choose "<i>Dolphin INI</i>" as file format instead of "<i>GCT</i>" to download
+         the codes formatted for use with Dolphin. Then right click the game in Dolphin and click on "<i>Properties</i>"
+         and on the bottom left corner of the property window click the "<i>Edit configuration</i>" button. Close the
+         property window. Open the text file you downloaded and copy everything following the "<i>[Gecko]</i>" tag below
+         the same tag in the configuration you just opened. If there is no "<i>[Gecko]</i>" tag (it should be the first
+         tag), create one on top of your configuration file. Save and close the configuration file.</p>
       <br />
       <h3 id="5.2"><a href="#5.2">5.2 Using the codes</a></h3>
-      <p>Reopen the property window, select the "<i>Gecko-Codes</i>" tab and check all the codes you want to be active. Most (but not all codes) will work with Dolphin. However, Dolphin has a code limit which is reached rather quickly. So if your game crashes right after it starts, you probably have too many codes active simultaneously.</p>
+      <p>Reopen the property window, select the "<i>Gecko-Codes</i>" tab and check all the codes you want to be active.
+         Most (but not all codes) will work with Dolphin. However, Dolphin has a code limit which is reached rather
+         quickly. So if your game crashes right after it starts, you probably have too many codes active simultaneously.
+      </p>
    </div>
-   </body>
+</body>
+
 </html>

index.html

@@ -1,126 +1,132 @@
 <!DOCTYPE HTML>
 <html lang="en">
-   <head>
+
+<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="Generates cheatfiles for Super Mario Sunshine speedrun practice.">
    <meta name="viewport" content="width=480px, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-      <link rel="stylesheet" href="style/style.css">
+   <link rel="stylesheet" href="/style/style.css">
-      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <title>Super Mario Sunshine Practice Code Generator</title>
-   </head>
+</head>
-   <body onload="updateChangelog()">
+
-      <div id="mainContainer">
+<body onload="updateChangelog()">
-         <input type="checkbox" id="usefastcode" style="display:none" autocomplete="off" />
+   <main>
-         <div id="left" class="section">
+      <div id="ml">
-            <div id="generalsettings">
+         <div id="cl" class="section sl">
-               <table><tbody>
+            <div>
-                  <tr>
+               <div class="config row">
-                     <td nowrap>
+                  <div>
-                        Game Version:
+                     <label for="sel-gamever">Game Version:</label>
-                     </td>
+                  </div>
-                     <td id="ph_gameversion" style="width:100%">
+                  <div>
-                        <select id="gameversion" onchange="updateCodelist()" autocomplete="off" style="visibility:hidden">
+                     <select id="sel-gamever" onchange="updateCodelist()" autocomplete="off">
                         <option selected disabled>Choose Version</option>
                         <option value="GMSE01">GMSE01 (NTSC-U)</option>
                         <option value="GMSP01">GMSP01 (PAL)</option>
                         <option value="GMSJ01">GMSJ01 (NTSC-J 1.0)</option>
                         <option value="GMSJ0A">GMSJ01 (NTSC-J 1.1/A)</option>
                      </select>
-                     </td>
+                  </div>
-                  </tr>
+               </div>
-                  <tr class="initialhidden">
+               <div class="config row hidden">
-                     <td nowrap>
+                  <div>
-                        Stage Loader:
+                     <label for="sel-stageloader">Stage Loader:</label>
-                     </td>
+                  </div>
-                     <td style="width:100%">
+                  <div>
-                        <select id="stageloader" onmouseover="updateUIDescription(this)" onchange="document.getElementById('usefastcode').checked = (this.value === 'yes');" style="width:100%" autocomplete="off">
+                     <select id="sel-stageloader"
+                        data-description="&lt;h2&gt;Stage Loader&lt;/h2&gt;&lt;p&gt;Select yes if you want to use a custom stage loader, which automatically loads the levels you choose, similiar to &#39;Fast Any%&#39;.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)" onchange="toggleFastCode()" autocomplete="off">
                         <option value="yes">Yes</option>
                         <option selected value="no">No</option>
                      </select>
-                     </td>
+                  </div>
-                  </tr>
+               </div>
-                  <tr class="initialhidden">
+               <div class="config row hidden">
-                     <td nowrap>
+                  <div>
-                        File Format:
+                     <label for="sel-format">File Format:</label>
-                     </td>
+                  </div>
-                     <td style="width:100%">
+                  <div>
-                        <select id="downloadformat" onmouseover="updateUIDescription(this)" style="width:100%">
+                     <select id="sel-format"
+                        data-description="&lt;h2&gt;File Format&lt;/h2&gt;&lt;p&gt;You can choose between 3 file formats:&lt;/p&gt;&lt;h4&gt;GCT&lt;/h4&gt;&lt;p&gt;Download a GCT file for use with Nintendont&lt;/p&gt;&lt;h4&gt;Dolphin INI&lt;/h4&gt;&lt;p&gt;Download a textfile containing the formatted codes for use with Dolphin. Copy the contents of the file on top of your games .ini file.&lt;/p&gt;&lt;p&gt;You can open the .ini file by right clicking the game in Dolphin. In the context menu select &#39;Properties&#39; and then &#39;Edit configuration&#39;.&lt;/p&gt;&lt;h4&gt;Cheat Manager TXT&lt;/h4&gt;&lt;p&gt;Download the cheats in a textfile formatted for use with the &lt;a target=&quot;_blank&quot; href=&quot;http://wiibrew.org/wiki/CheatManager&quot;&gt;Gecko Cheat Manager&lt;/a&gt;. Place the txt file in SD:/txtcodes/.&lt;/p&gt;&lt;p&gt;A zip archive containing pregenerated txt files with all available codes on this site can be downloaded &lt;a target=&quot;_blank&quot; href=&quot;files/GCMCodes.zip&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)" autocomplete="off">
                         <option selected value="gct">GCT</option>
                         <option value="ini">Dolphin INI</option>
                         <option value="gcm">Cheat Manager TXT</option>
                      </select>
-                     </td>
-                  </tr>
-                  <tr class="initialhidden">
-                     <td></td>
-                     <td>
-                        <button onclick="downloadCodes()" id="downloadbutton">Download</button>
-                     </td>
-                  </tr>
-               </tbody></table>
-            </div>
-            <div id="codes" class="framed initialhidden">
-               
-               <ul id="checklist"></ul>
                   </div>
                </div>
-         <div id="center" class="section initialhidden">
+               <div class="config row hidden">
-            <div class="framed">
+                  <div></div>
-               <h2>Stage Loader</h2>
+                  <div>
+                     <button onclick="downloadCodes()" id="downloadbutton">Download</button>
+                  </div>
+               </div>
+               <ul id="codelist" class="framed hidden">
+               </ul>
+            </div>
+         </div>
+         <div id="cc" class="section sc hidden">
+            <div id="stageloader" class="framed">
+               <h2>Stage Loader</h2>
+               <div class="config row">
                   <div>
-                  <table style="width:100%"><tbody>
-                     <tr>
-                        <td nowrap>
                      <label for="route_notext">Remove Dialogue:</label>
-                        </td>
+                  </div>
-                        <td style="width:100%">
+                  <div>
-                           <select id="route_notext" style="width:100%" onmouseover="updateUIDescription(this)">
+                     <select id="route_notext"
+                        data-description="&lt;h2&gt;Remove Dialogue&lt;/h2&gt;&lt;p&gt;Replaces all Dialogue with &quot;!!!&quot;. &#39;Always&#39; and &#39;Not in Pianta 5&#39; will override the dialogue skip from the DPad Functions.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)">
                         <option value="yes">Always</option>
                         <option selected value="pv5">Not in Pianta 5</option>
                         <option value="no">Don't include</option>
                      </select>
-                        </td>
+                  </div>
-                     </tr>
+               </div>
-                     <tr>
+               <div class="config row">
-                        <td nowrap>
+                  <div>
-                           <label for="route_nofmvs">Skippable Cutscenes:</label>
+                     <label for="route_nofmvs">Skippable FMVs:</label>
-                        </td>
+                  </div>
-                        <td style="width:100%">
+                  <div>
-                           <select id="route_nofmvs" style="width:100%" onmouseover="updateUIDescription(this)">
+                     <select id="route_nofmvs"
+                        data-description="&lt;h2&gt;Skippable Cutscenes&lt;/h2&gt;&lt;p&gt;Makes FMVs skippable. &#39;Always&#39; has the same effect as the &#39;FMV Skips&#39; code. Also, having &#39;FMV Skips&#39; enabled will override &#39;Not in Pinna&#39; - so don&#39;t use both simultaneously.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)">
                         <option value="yes">Always</option>
                         <option selected value="pp">Not in Pinna</option>
                         <option value="no">Don't include</option>
                      </select>
-                        </td>
+                  </div>
-                     </tr>
+               </div>
-                     <tr>
+               <div class="config row">
-                        <td nowrap>
+                  <div>
                      <label for="route_order">Level Order:</label>
-                        </td>
+                  </div>
-                        <td style="width:100%">
+                  <div>
-                           <select id="route_order" style="width:100%" onmouseover="updateUIDescription(this)">
+                     <select id="route_order"
+                        data-description="&lt;h2&gt;Level Order&lt;/h2&gt;&lt;p&gt;The order in which levels are loaded:&lt;/p&gt;&lt;h4&gt;As specified&lt;/h4&gt;&lt;p&gt;The code loads levels in the order of the list.&lt;/p&gt;&lt;h4&gt;Random, no duplicates&lt;/h4&gt;&lt;p&gt;The code picks levels at random, excluding levels that you’ve finished already.&lt;/p&gt;&lt;h4&gt;Fully random&lt;/h4&gt;&lt;p&gt;The code picks levels at random, even levels that you’ve finished already.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)">
                         <option selected value="list">As specified</option>
                         <option value="shuffle">Random, no duplicates</option>
                         <option value="random">Fully random</option>
                      </select>
-                        </td>
+                  </div>
-                     </tr>
+               </div>
-                     <tr>
+               <div class="config row">
-                        <td nowrap>
+                  <div>
-                          <label for="route_ending">After the last level:</label>
+                     <label for="route_ending">Post Game:</label>
-                        </td>
+                  </div>
-                        <td style="width:100%">
+                  <div>
-                           <select id="route_ending" style="width:100%" onmouseover="updateUIDescription(this)">
+                     <select id="route_ending"
+                        data-description="&lt;h2&gt;Route Ending&lt;/h2&gt;&lt;p&gt;What to do after you complete the final level on the list. This has no effect if the level order is set to Fully random.&lt;/p&gt;"
+                        onmouseover="updateUIDescription(this)">
                         <option selected value="0F00">Return to the title screen</option>
                         <option value="0109">Load the flooded plaza</option>
                         <option value="0102">Load the post-Corona plaza</option>
                         <option value="3400">Load Corona Mountain</option>
                         <option value="3C00">Load the Bowser fight</option>
                      </select>
-                        </td>
+                  </div>
-                     </tr>
-                     </tbody></table>
                </div>
                <div>
                   <ul id="route_levels">
@@ -257,25 +263,52 @@
                      </li>
                   </ul>
                </div>
-               <div style="text-align:center">
+               <div class="config row">
-                  <button id="route_clear" type="button">Clear list</button>
+                  <div>
+                     <button id="route_clear" type="button">Clear List</button>
+                  </div>
+                  <div>
                      <select id="route_presets">
                         <option value="" selected>Load a preset…</option>
                         <optgroup label="Full-game categories, minimal plaza">
-                        <option value="020002020203020404000406080008010802080308040805080605000501050205030502050603000301030203030304030503060205020606000601060206030604060506060900090109020903090409050906;3400">Fast Any% usual route</option>
+                           <option
-                        <option value="020002020203020404000406080008010802080308040805080605000501050205030502050602050206060006010602060306040605060609000901090209030904090509060300030103020303030403050306;3400">Fast Any% Ricco late</option>
+                              value="020002020203020404000406080008010802080308040805080605000501050205030502050603000301030203030304030503060205020606000601060206030604060506060900090109020903090409050906;3400">
-                        <option value="020002020203020408000801080208030804080508060500050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060400040104020403040404050406;3400">Fast Any% No Major Skips</option>
+                              Fast Any% usual route</option>
-                        <option value="02000201020202030800080108020803080408050806080705000501050205030504050505060507030003010302030303040305030603070204020502060207060006010602060306040605060606070900090109020903090409050906090704000401040204030404040304050406;3400">Fast 58 Shines / All Episodes</option>
+                           <option
-                        <option value="02000201020202020800080108020803080408040804080508060807080705000501050105020503050405040505050505060507030003010301030203030303030403050305030603070203020402050205020502060207060006010601060206030603060306040605060606070900090109010901090209030904090509050906090704000400040004010402040304050404040304020406;3400">Fast 79 Shines / All Level Shines</option>
+                              value="020002020203020404000406080008010802080308040805080605000501050205030502050602050206060006010602060306040605060609000901090209030904090509060300030103020303030403050306;3400">
-                        <option value="020002020203020404000406080008010802080308040805080605000501050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060102160001021400010201021D00010201020102010201020102010204060405040404030402040204010400040015000207020502070205020003020307030303010507050705051700060706030603060109070905090109010807080708040804;3400">Fast 96 Shines / All Shines, No Blues</option>
+                              Fast Any% Ricco late</option>
+                           <option
+                              value="020002020203020408000801080208030804080508060500050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060400040104020403040404050406;3400">
+                              Fast Any% No Major Skips</option>
+                           <option
+                              value="02000201020202030800080108020803080408050806080705000501050205030504050505060507030003010302030303040305030603070204020502060207060006010602060306040605060606070900090109020903090409050906090704000401040204030404040304050406;3400">
+                              Fast 58 Shines / All Episodes</option>
+                           <option
+                              value="02000201020202020800080108020803080408040804080508060807080705000501050105020503050405040505050505060507030003010301030203030303030403050305030603070203020402050205020502060207060006010601060206030603060306040605060606070900090109010901090209030904090509050906090704000400040004010402040304050404040304020406;3400">
+                              Fast 79 Shines / All Level Shines</option>
+                           <option
+                              value="020002020203020404000406080008010802080308040805080605000501050105020503050405050506030003010302030303040305030602050206060006010602060306040605060609000901090209030904090509060102160001021400010201021D00010201020102010201020102010204060405040404030402040204010400040015000207020502070205020003020307030303010507050705051700060706030603060109070905090109010807080708040804;3400">
+                              Fast 96 Shines / All Shines, No Blues</option>
                         </optgroup>
                         <optgroup label="Full-game categories">
-                        <option value="00000100020002020105020302040105040004060106080008010802080308040805080601070108050005010502050305020506010803000301030203030304030503060108020502060108060006010602060306040605060601080900090109020903090409050906;0109">Any% usual route</option>
+                           <option
-                        <option value="00000100020002020105020302040105080008010802080308040805080601070108050005010502050305040505050601080300030103020303030403050306010802050206010806000601060206030604060506060108090009010902090309040905090601080400040104020403040404050406;0109">Any% No Major Skips</option>
+                              value="00000100020002020105020302040105040004060106080008010802080308040805080601070108050005010502050305020506010803000301030203030304030503060108020502060108060006010602060306040605060601080900090109020903090409050906;0109">
-                        <option value="0000010002000201010502020203010508000801080208030804080508060807010701080500050105020503050405050506050701080300030103020303030403050306030701080204020502060207010806000601060206030604060506060607010809000901090209030904090509060907010804000401040204030404040304050406;0109">58 Shines / All Episodes</option>
+                              Any% usual route</option>
-                        <option value="0000010002000201010502020202010508000801080208030804080408040805080608070807010701080500050105010502050305040504050505050506050701080300030103010302030303030304030503050306030701080203020402050205020502060207010806000601060106020603060306030604060506060607010809000901090109010902090309040905090509060907010804000400040004010402040304050404040304020406;0109">79 Shines / All Level Shines</option>
+                           <option
-                        <option value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF0102010201020102010201020102010201020102010201020102010204060405040404030402040204010400040001020102020702050207020502000102030203070303030101020507050705050102010206070603060306010102090709050901090101020807080708040804;0102">96 Shines / All Shines, No Blues</option>
+                              value="00000100020002020105020302040105080008010802080308040805080601070108050005010502050305040505050601080300030103020303030403050306010802050206010806000601060206030604060506060108090009010902090309040905090601080400040104020403040404050406;0109">
-                        <option value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF01020102010201020102010201020102010201020102010201020404040304020405040004000401040204050102010202000207020702070207010209010905090509070102080408040807080701020505050705070102010206010603060606070102010203010303030703070102;0102">120 Shines / All Shines, All Blues</option>
+                              Any% No Major Skips</option>
+                           <option
+                              value="0000010002000201010502020203010508000801080208030804080508060807010701080500050105020503050405050506050701080300030103020303030403050306030701080204020502060207010806000601060206030604060506060607010809000901090209030904090509060907010804000401040204030404040304050406;0109">
+                              58 Shines / All Episodes</option>
+                           <option
+                              value="0000010002000201010502020202010508000801080208030804080408040805080608070807010701080500050105010502050305040504050505050506050701080300030103010302030303030304030503050306030701080203020402050205020502060207010806000601060106020603060306030604060506060607010809000901090109010902090309040905090509060907010804000400040004010402040304050404040304020406;0109">
+                              79 Shines / All Level Shines</option>
+                           <option
+                              value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF0102010201020102010201020102010201020102010201020102010204060405040404030402040204010400040001020102020702050207020502000102030203070303030101020507050705050102010206070603060306010102090709050901090101020807080708040804;0102">
+                              96 Shines / All Shines, No Blues</option>
+                           <option
+                              value="0000010002000202010502030204010504000406010608000801080208030804080508060107010805000501050105020503050405050506010803000301030203030304030503060108020502060108010806000601060206030604060506060108090009010902090309040905090601FF01020102010201020102010201020102010201020102010201020404040304020405040004000401040204050102010202000207020702070207010209010905090509070102080408040807080701020505050705070102010206010603060606070102010203010303030703070102;0102">
+                              120 Shines / All Shines, All Blues</option>
                         </optgroup>
                         <optgroup label="Individual Worlds">
                            <option value="020002020203020402050206">Bianco Hills</option>
@@ -299,27 +332,50 @@
                   </div>
                </div>
             </div>
-         <div id="right" class="section">
+         </div>
+      </div>
+      <div id="mr">
+         <div id="cr" class="section sr">
             <div id="descriptionbox" class="framed">
-               <h1>Super Mario Sunshine Practice Code Generator v2</h1>
+               <h1>SMS Practice File Generator</h1>
                <p style="margin-top:0"><i id="lastupdate"></i></p>
                <br />
-               <p>This is a cheatfile generator for Super Mario Sunshine speedrun practice. A guide on how to use the generator and practice codes on your Wii can be found here: <a target="_blank" href="guide.html">Guide</a>. Visit the <a target="_blank" href="guide.html#3">troubleshooting section</a> if you encounter any issues.</p>
+               <p>This is a cheatfile generator for Super Mario Sunshine speedrun practice. A guide on how to use the
+                  generator and practice codes on your Wii can be found here: <a target="_blank"
+                     href="guide.html">Guide</a>. Visit the <a target="_blank" href="guide.html#3">troubleshooting
+                     section</a> if you encounter any issues.
+               </p>
                <br />
                <h4>Changelog:</h4>
                <div id="changelog"></div>
-               <p style="margin:0;text-align:right"><i>Made by <a target="_blank" href="https://twitter.com/psychonauter">Psychonauter</a>, <a target="_blank" href="https://twitter.com/qbe_root">Noki Doki</a> &amp; <a target="_blank" href="https://twitter.com/srlmilk">Milk</a></i></p>
+               <p style="margin:0;text-align:right">
+                  <i>Made by
+                     <a target="_blank" href="https://twitter.com/psychonauter">Psychonauter</a>,
+                     <a target="_blank" href="https://twitter.com/qbe_root">Noki Doki</a> &amp;
+                     <a target="_blank" href="https://twitter.com/srlmilk">Milk</a>
+                  </i>
+               </p>
                <hr />
                <div id="smscommunity">
-                  <a target="_blank" href="https://discord.gg/0SoktBcRDw8B1NJB" title="Sunshine Community Discord"><img src="img/discord_bubble.png" alt="Sunshine Community Discord" /></a>
+                  <a target="_blank" href="https://discord.gg/0SoktBcRDw8B1NJB" title="Sunshine Community Discord">
-                  <a target="_blank" href="https://speedrun.com/sms" title="Sunshine Leaderboards"><img src="img/src_bubble.png" alt="Sunshine Leaderboards" /></a>
+                     <img src="img/discord_bubble.png" alt="Sunshine Community Discord" />
+                  </a>
+                  <a target="_blank" href="https://speedrun.com/sms" title="Sunshine Leaderboards">
+                     <img src="img/src_bubble.png" alt="Sunshine Leaderboards" />
+                  </a>
                   <h4 style="display:inline;vertical-align:middle;margin:0px 10px">Sunshine Community</h4>
-                  <a target="_blank" href="https://twitter.com/SMSCommunity" title="Sunshine Community Twitter"><img src="img/twitter_bubble.png" alt="Sunshine Community Twitter" /></a>
+                  <a target="_blank" href="https://twitter.com/SMSCommunity" title="Sunshine Community Twitter">
-                  <a target="_blank" href="https://www.twitch.tv/SunshineCommunity" title="Sunshine Community Twitch"><img src="img/twitch_bubble.png" alt="Sunshine Community Twitch" /></a>
+                     <img src="img/twitter_bubble.png" alt="Sunshine Community Twitter" />
+                  </a>
+                  <a target="_blank" href="https://www.twitch.tv/SunshineCommunity" title="Sunshine Community Twitch">
+                     <img src="img/twitch_bubble.png" alt="Sunshine Community Twitch" />
+                  </a>
                </div>
             </div>
          </div>
       </div>
+   </main>
    <script language="javascript" src="gctGenerator.js"></script>
-   </body>
+</body>
+
 </html>

ios58.html

@@ -1,70 +1,89 @@
 <!DOCTYPE HTML>
 <html lang="en">
-   <head>
+
+<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta name="description" content="A guide on how to install IOS58 for use with Nintendont.">
-      <meta name="viewport" content="width=480px, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style/guide.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Installing IOS58</title>
-   </head>
+</head>
-   <body>
+
+<body>
   <div id="guide_content" class="framed">
-         <h1 style="text-align:center;width:100%">Installing IOS58</h1>
+    <h1 class="center">Installing IOS58</h1>
-         <p style="margin:0;text-align:center;width:100%;">Requires Homebrew! <a href="http://gct.zint.ch/guide.html">Main Guide</a></p>
+    <p style="margin:0;text-align:center;width:100%;">Requires Homebrew! <a href="http://gct.zint.ch/guide.html">Main
+        Guide</a></p>
     <br />
     <h2 id="1"><a href="#1">1. Download the ressources</a></h2>
-         <a target="_blank" href="img/nusdownloader_00.png"><img src="img/nusdownloader_00.png" align="right" style="position:relative;width:50%;display:inline-block;margin-left:20px;" alt="NUS Downloader" /></a>
+    <a target="_blank" href="img/nusdownloader_00.png"><img src="img/nusdownloader_00.png" align="right"
+        style="position:relative;width:50%;display:inline-block;margin-left:20px;" alt="NUS Downloader" /></a>
     <h3 id="1.1"><a href="#1.1">1.1 Download NUS Downloader</a></h3>
-         <p>NUS Downloader is a Windows program which you can use to download official IOSs from Nintendo. you can download it <a target="_blank" href="http://wiibrew.org/wiki/NUS_Downloader">from Wiibrew</a>.</p>
+    <p>NUS Downloader is a Windows program which you can use to download official IOSs from Nintendo. you can download
+      it <a target="_blank" rel="noreferrer" href="http://wiibrew.org/wiki/NUS_Downloader">from Wiibrew</a>.</p>
     <br />
     <h3 id="1.2"><a href="#1.2">1.2 Download IOS58</a></h3>
-         <p>Open NUSDownloader and Select IOS58 from the database (see image). Make sure "<i>Pack WAD</i>" is checked. Uncheck "<i>Keep Encrypted Contents</i>" and hit "<i>Start NUS Download!</i>.</p>
+    <p>Open NUSDownloader and Select IOS58 from the database (see image). Make sure "<i>Pack WAD</i>" is checked.
+      Uncheck "<i>Keep Encrypted Contents</i>" and hit "<i>Start NUS Download!</i>.</p>
     <h3 id="1.3"><a href="#1.3">1.3 Copy the WAD</a></h3>
-         <p>The downloaded .wad will be located in <span style="font-family:monospace">titles/000000010000003A/6176/</span> in your NUS Downloader directory. Copy the wad into the root of your SD card <b>without renaming it</b>.</p>
+    <p>The downloaded .wad will be located in <span style="font-family:monospace">titles/000000010000003A/6176/</span>
+      in your NUS Downloader directory. Copy the wad into the root of your SD card <b>without renaming it</b>.</p>
     <h3 id="1.4"><a href="#1.4">1.4 Download WiiMod</a></h3>
-         <p>Download WiiMod from <a target="_blank" href="https://gbatemp.net/threads/wii-mod.272321/">GBAtemp</a> and place the app into your apps folder. Put the SD card back into your Wii and open the homebrew channel.</p>
+    <p>Download WiiMod from <a target="_blank" rel="noreferrer"
+        href="https://gbatemp.net/threads/wii-mod.272321/">GBAtemp</a> and place
+      the app into your apps folder. Put the SD card back into your Wii and open the homebrew channel.</p>
     <br />
     <hr />
     <div id="iosinstall" style="clear:both">
       <h2 id="2"><a href="#2">2. Install IOS58</a></h2>
       <div>
         <h3 id="2.1"><a href="#2.1">2.1 Launch WiiMod and select "IOSs"</a></h3>
-              <a target="_blank" href="img/wiimod_00.png"><img src="img/wiimod_00.png" width="360" height="240" alt="(1)" /></a>
+        <a target="_blank" href="img/wiimod_00.png"><img src="img/wiimod_00.png" width="360" height="240"
+            alt="(1)" /></a>
       </div>
       <div>
         <h3 id="2.2"><a href="#2.2">2.2 Navigate to 58 and press A</a></h3>
-              <a target="_blank" href="img/wiimod_01.png"><img src="img/wiimod_01.png" width="360" height="240" alt="(2)" /></a>
+        <a target="_blank" href="img/wiimod_01.png"><img src="img/wiimod_01.png" width="360" height="240"
+            alt="(2)" /></a>
       </div>
       <div>
         <h3 id="2.3"><a href="#2.3">2.3 Select "Install IOS"</a></h3>
-              <a target="_blank" href="img/wiimod_02.png"><img src="img/wiimod_02.png" width="360" height="240" alt="(3)" /></a>
+        <a target="_blank" href="img/wiimod_02.png"><img src="img/wiimod_02.png" width="360" height="240"
+            alt="(3)" /></a>
       </div>
       <div>
         <h3 id="2.4"><a href="#2.4">2.4 Select "6176"</a></h3>
-              <a target="_blank" href="img/wiimod_03.png"><img src="img/wiimod_03.png" width="360" height="240" alt="(4)" /></a>
+        <a target="_blank" href="img/wiimod_03.png"><img src="img/wiimod_03.png" width="360" height="240"
+            alt="(4)" /></a>
       </div>
       <div>
         <h3 id="2.5"><a href="#2.5">2.5 Confirm that you want to install "IOS58 v6176"</a></h3>
-              <a target="_blank" href="img/wiimod_04.png"><img src="img/wiimod_04.png" width="360" height="240" alt="(5)" /></a>
+        <a target="_blank" href="img/wiimod_04.png"><img src="img/wiimod_04.png" width="360" height="240"
+            alt="(5)" /></a>
       </div>
       <div>
         <h3 id="2.6"><a href="#2.6">2.6 Select revision 6176</a></h3>
-              <a target="_blank" href="img/wiimod_05.png"><img src="img/wiimod_05.png" width="360" height="240" alt="(6)" /></a>
+        <a target="_blank" href="img/wiimod_05.png"><img src="img/wiimod_05.png" width="360" height="240"
+            alt="(6)" /></a>
       </div>
       <div>
         <h3 id="2.7"><a href="#2.7">2.7 Make sure all options are set to "No"</a></h3>
-              <a target="_blank" href="img/wiimod_06.png"><img src="img/wiimod_06.png" width="360" height="240" alt="(7)" /></a>
+        <a target="_blank" href="img/wiimod_06.png"><img src="img/wiimod_06.png" width="360" height="240"
+            alt="(7)" /></a>
       </div>
       <div>
         <h3 id="2.8"><a href="#2.8">2.8 Press A again to start the installation</a></h3>
-              <a target="_blank" href="img/wiimod_07.png"><img src="img/wiimod_07.png" width="360" height="240" alt="(8)" /></a>
+        <a target="_blank" href="img/wiimod_07.png"><img src="img/wiimod_07.png" width="360" height="240"
+            alt="(8)" /></a>
       </div>
       <div>
         <h3 id="2.9"><a href="#2.9">2.9 That's it!</a></h3>
-              <a target="_blank" href="img/wiimod_08.png"><img src="img/wiimod_08.png" width="360" height="240" alt="(9)" /></a>
+        <a target="_blank" href="img/wiimod_08.png"><img src="img/wiimod_08.png" width="360" height="240"
+            alt="(9)" /></a>
       </div>
     </div>
   </div>
-   </body>
+</body>
+
 </html>

style/guide.css

@@ -1,82 +1,345 @@
-html {
+html,
-   background-color:#f0f1f0;
+body,
-   color:#000;
+div,
-   font-family:Calibri;
+span,
-   text-align:center
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+   margin: 0;
+   padding: 0;
+   border: 0;
+   font-size: 100%;
+   font: inherit;
+   vertical-align: baseline;
+   box-sizing: border-box
+}
+
+:focus {
+   outline: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+   display: block;
 }
 
 body {
-   display:inline-block;
+   line-height: 1;
-   min-height:450px;
-   font-size:1em;
-   text-align:left
 }
 
-h1,h2,h3,h4{
+ol,
-   margin:10px 20px
+ul {
+   list-style: none;
 }
 
-h1 {
+blockquote,
-   font-size:1.3em
+q {
+   quotes: none;
 }
 
-h2 {
+blockquote:before,
-   font-size:1.1em
+blockquote:after,
+q:before,
+q:after {
+   content: '';
+   content: none;
 }
 
-h3,h4 {
+table {
-   margin-top:15px;
+   border-collapse: collapse;
-   font-size:1em
+   border-spacing: 0;
 }
 
-p {
+input[type=search]::-webkit-search-cancel-button,
-   margin:10px 0px 0px 0px
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+   -webkit-appearance: none;
+   -moz-appearance: none;
+}
+
+html {
+   font-size: 100%;
+   -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+   outline: thin dotted;
+}
+
+a:active,
+a:hover {
+   outline: 0;
 }
 
 img {
-   margin:0px 10px;
+   border: 0;
-   border-radius:4px;
+   -ms-interpolation-mode: bicubic;
-   max-width:100%
+}
+
+button,
+input,
+select,
+textarea {
+   font-size: 100%;
+   margin: 0;
+   vertical-align: baseline;
+   *vertical-align: middle;
+}
+
+button,
+input {
+   line-height: normal;
+}
+
+button,
+select {
+   text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+   -webkit-appearance: button;
+   cursor: pointer;
+   *overflow: visible;
+}
+
+button[disabled],
+html input[disabled] {
+   cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+   border: 0;
+   padding: 0;
+}
+
+table {
+   border-collapse: collapse;
+   border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+   color: #222;
+}
+
+
+::-moz-selection {
+   background: #b3d4fc;
+   text-shadow: none;
+}
+
+::selection {
+   background: #b3d4fc;
+   text-shadow: none;
+}
+
+img {
+   vertical-align: middle;
+}
+
+fieldset {
+   border: 0;
+   margin: 0;
+   padding: 0;
+}
+
+textarea {
+   resize: vertical;
+}
+
+
+html {
+   background-color: #f0f1f0;
+   color: #000;
+   font-family: Calibri, Arial, sans-serif;
+   text-align: center
+}
+
+body {
+   display: inline-block;
+   margin: 15px 0px;
+   min-height: 450px;
+   font-size: 1em;
+   text-align: left;
+   line-height: 1.2rem;
+}
+
+h1,
+h2,
+h3,
+h4 {
+   margin: 10px 20px;
+   font-weight: bold;
+}
+
+h1 {
+   font-size: 1.3rem;
+   text-align: center;
+}
+
+h2 {
+   font-size: 1.1rem;
+   margin-top: 15px;
+}
+
+h3,
+h4 {
+   margin-top: 15px;
+   font-size: 1rem
+}
+
+p,
+ul,
+li {
+   margin: 15px 10px 5px 30px
+}
+
+ul {
+   list-style: circle
+}
+
+img {
+   margin: 0px 10px;
+   border-radius: 4px;
+   max-width: 100%
 }
 
 a {
-   color:#ff0029;
+   color: #ff0029;
-   text-decoration:none
+   text-decoration: none
 }
 
 a:hover {
-   color:#1185fd
+   color: #1185fd
 }
 
 p {
-   margin:0px 30px
+   margin: 0px 30px
-}
-
-ul li {
-   margin:7px 10px
 }
 
 .framed {
-   padding:12px;
+   padding: 12px;
-   text-align:justify;
+   text-align: justify;
-   border-style:solid;
+   border-style: solid;
-   border-color:#000;
+   border-color: #000;
-   border-width:1px;
+   border-width: 1px;
-   border-radius:0px
+   border-radius: 0px
 }
 
 #guide_content {
-   max-width:1000px
+   max-width: 1000px
 }
 
 #indexlisting h3 {
-   margin:2px 20px
+   margin: 4px 20px
 }
 
 #iosinstall {
-   text-align:center;
+   text-align: center;
 }
 
 #iosinstall div {
-   display:inline-block;
+   display: inline-block;
+}
+
+.center {
+   text-align: center;
+}
+
+@media screen and (max-width: 1100px) {
+   .framed {
+      border: none;
+   }
 }

style/style.css

@@ -1,294 +1,489 @@
-html {
+html,
-   background-color:#f0f1f0;
+body,
-   color:#000;
+div,
-   font-family:Calibri;
+span,
-   text-align:left
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+   margin: 0;
+   padding: 0;
+   border: 0;
+   font-size: 100%;
+   font: inherit;
+   vertical-align: baseline;
+   box-sizing: border-box
+}
+
+:focus {
+   outline: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+   display: block;
 }
 
 body {
-   display:inline-block;
+   line-height: 1;
-   margin:10px 0px;
-   min-height:450px;
-   font-size:1em;
-   text-align:left
 }
 
-h1,h2,h3,h4{
+ol,
-   margin:5px 0px
+ul {
+   list-style: none;
 }
 
-h2,h3 {
+blockquote,
-   text-align:center
+q {
+   quotes: none;
 }
 
-h1 {
+blockquote:before,
-   font-size:1.3em
+blockquote:after,
+q:before,
+q:after {
+   content: '';
+   content: none;
 }
 
-h2 {
+table {
-   font-size:1.1em
+   border-collapse: collapse;
+   border-spacing: 0;
 }
 
-h3,h4 {
+input[type=search]::-webkit-search-cancel-button,
-   margin-top:15px;
+input[type=search]::-webkit-search-decoration,
-   font-size:1em
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+   -webkit-appearance: none;
+   -moz-appearance: none;
 }
 
-p {
+html {
-   margin:10px 5px 0px 2px
+   font-size: 100%;
+   -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+   outline: thin dotted;
+}
+
+a:active,
+a:hover {
+   outline: 0;
 }
 
 img {
-   border-radius:4px;
+   border: 0;
-   max-width:100%
+   -ms-interpolation-mode: bicubic;
+}
+
+button,
+input,
+select,
+textarea {
+   font-size: 100%;
+   margin: 0;
+   vertical-align: baseline;
+   *vertical-align: middle;
+}
+
+button,
+input {
+   line-height: normal;
+}
+
+button,
+select {
+   text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+   -webkit-appearance: button;
+   cursor: pointer;
+   *overflow: visible;
+}
+
+button[disabled],
+html input[disabled] {
+   cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+   border: 0;
+   padding: 0;
+}
+
+table {
+   border-collapse: collapse;
+   border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+   color: #222;
+}
+
+
+::-moz-selection {
+   background: #b3d4fc;
+   text-shadow: none;
+}
+
+::selection {
+   background: #b3d4fc;
+   text-shadow: none;
+}
+
+img {
+   vertical-align: middle;
+}
+
+fieldset {
+   border: 0;
+   margin: 0;
+   padding: 0;
+}
+
+textarea {
+   resize: vertical;
+}
+
+html {
+   background-color: #f0f1f0;
+   color: #000;
+   font-family: Calibri, Arial, sans-serif;
+   text-align: center;
+   width: 100%;
+}
+
+body {
+   display: inline-block;
+   min-height: 450px;
+   font-size: 1rem;
+   width: 1250px;
+   text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4 {
+   margin: 5px 0px 10px 2px;
+   font-size: 1.1rem;
+   font-weight: bold;
+}
+
+p,
+table,
+h3,
+h4 {
+   margin: 10px 5px 0px 2px
+}
+
+h4 {
+   margin-top: 17px;
+   font-size: 1rem;
+}
+
+i {
+   font-style: italic;
+}
+
+img {
+   border-radius: 4px;
+   max-width: 100%
 }
 
 a {
-   color:#ff0029;
+   color: #ff0029;
-   text-decoration:none
+   text-decoration: none
 }
 
 a:hover {
-   color:#1185fd
+   color: #1185fd
 }
 
 hr {
-   border-color:#f3f3f3
+   border-color: #f3f3f3
+}
+
+td {
+   padding: 2px 2px 2px 0px;
+}
+
+th {
+   font-weight: bold
 }
 
 input[type=checkbox] {
-   vertical-align:middle;
+   vertical-align: middle;
-   width:15px;
+   width: 15px;
-   height:15px;
+   height: 15px;
-   margin:0;
+   margin: 0;
    -webkit-appearance: checkbox;
    box-sizing: border-box
 }
 
-tr td:first-child {
+main {
-   padding-right:5px
+   display: table;
+   clear: both;
+   width: 100%;
 }
 
-td {
+#ml,
-   vertical-align:middle
+#mr {
+   display: table-cell;
+   white-space: nowrap;
+   vertical-align: top;
 }
 
-#mainContainer {
+#mr {
-   width:100vw;
+   width: 100%;
-   text-align:center
 }
 
-.initialhidden {
+#cl,
-   visibility:hidden;
+#cc {
+   width: 360px;
+}
+
+#cr {
+   width: 100%;
+}
+
+.config.row {
+   display: block;
+   padding-bottom: 3px;
+   padding-top: 3px;
+}
+
+.config.row div {
+   display: inline-block;
+   vertical-align: middle
+}
+
+.config.row div:first-child {
+   width: calc(40% - 10px);
+   white-space: nowrap;
+   overflow: hidden;
+}
+
+.config.row div:nth-child(2) {
+   width: calc(60% - 10px);
+}
+
+.config.row select,
+.config.row button {
+   width: 100%;
 }
 
 .section {
-   display:inline-block;
+   display: inline-block;
-   vertical-align:top;
+   vertical-align: top;
-   margin:20px 8px;
+   text-align: left;
-   text-align:left
+   margin: 30px 0px;
+   min-width: 360px;
+   padding: 0px 5px;
+   white-space: normal;
+   white-space: initial;
 }
 
 .framed {
-   padding:12px;
+   padding: 12px;
-   text-align:justify;
+   background: #f3f3f3;
-   border-style:solid;
+   text-align: justify;
-   border-color:#000;
+   border-style: solid;
-   border-width:1px;
+   border-color: #c1c1c1;
-   border-radius:0px
+   border-width: 1px;
-}
+   border-radius: 2px
-
-.section .framed {
-   margin-top:16px
-}
-
-.section .framed:first-of-type {
-   margin-top:0px
-}
-
-#gameversion {
-   width:100%;
-   margin-top:0
-}
-
-#downloadbutton {
-   width:100%;
-   margin-top:2px
-}
-
-#generalsettings table {
-   width:100%
-}
-
-#home {
-   display:inline-block;
-   min-width:400px;
-   width:50vw;
-   margin:10px 0px;
-   padding:4px;
-   text-align:justify
-}
-
-#smscommunity {
-   display:block;
-   text-align:center;
-   margin:18px 0px 7px 0px
-}
-
-#smscommunity img {
-   margin:0px 3px;
-   vertical-align:middle
-}
-
-#left {
-   width:30vw;
-   min-width:300px;
-   max-width:400px
-}
-
-#center {
-   display:none
-}
-
-#right {
-   width:50vw;
-   min-width:300px;
-   max-width:800px
-}
-
-#usefastcode:checked ~ #center {
-   display:inline-block;
-   width:20vw;
-   min-width:300px;
-   max-width:400px
-}
-
-#usefastcode:checked ~ #left {
-   width:20vw
-}
-
-#usefastcode:checked ~ #right {
-   width:35vw
-}
-
-@media screen and (max-width:1100px) {
-
-   #usefastcode:checked ~ #left, #usefastcode:checked ~ #center{
-      min-width:45vw;
-      max-width:45vw
-   }
-
-   #usefastcode:checked ~ #right {
-      min-width:90vw;
-      min-width:calc(90vw + 24px);
-      max-width:90vw
-   }
-}
-
-@media screen and (max-width:700px) {
-
-   #left,#center,#usefastcode:checked ~ #left, #usefastcode:checked ~ #center{
-      min-width:400px;
-      max-width:90vw;
-      width:90vw
-   }
-
-   #right,#usefastcode:checked ~ #right {
-      display:none
-   }
 }
 
 button {
-   padding:6px;
+   padding: 6px;
-   margin:auto;
+   margin: auto;
-   color:#f1f1f1;
+   color: #f1f1f1;
-   background-color:#ca0707;
+   background-color: #ca0707;
-   border-style:none;
+   border-style: none;
-   border-radius:4px;
+   border-radius: 4px;
-   cursor:pointer;
+   cursor: pointer;
-   outline:none
+   outline: none
 }
 
 button:hover {
-   background-color:#ff5151;
+   background-color: #ff5151;
 }
 
 select {
-   margin:2px 0px;
+   margin: 2px 0px;
-   background-color:#ca0707;
+   background-color: #ca0707;
-   padding:5px;
+   padding: 5px;
-   color:#fff;
+   color: #fff;
-   width:200px;
+   width: 200px;
-   border-style:none;
+   border-style: none;
-   border-radius:4px;
+   border-radius: 4px;
-   -webkit-user-select:none;
+   -webkit-user-select: none;
-   -moz-user-select:none;
+   -moz-user-select: none;
-   -ms-user-select:none;
+   -ms-user-select: none;
-   user-select:none;
+   user-select: none;
-   outline:none
+   outline: none
 }
 
 select:disabled {
-   background:#e2e2e2;
+   background: #e2e2e2;
    color: grey
 }
 
 optgroup {
-   background:#ff5151
+   background: #ff5151
 }
 
 option {
-   background:#ca0707
+   background: #ca0707
 }
 
 label {
-   -webkit-user-select:none;
+   -webkit-user-select: none;
-   -moz-user-select:none;
+   -moz-user-select: none;
-   -ms-user-select:none;
+   -ms-user-select: none;
-   user-select:none
+   user-select: none
+}
+
+select,
+option,
+button {
+   font-size: .9rem;
 }
 
 ul {
-   margin:0;
+   margin: 0;
-   padding:0;
+   padding: 0;
-   width:100%;
+   list-style-type: none
-   list-style-type:none
 }
 
 ul li {
-   margin-top:2px;
+   margin-top: 2px;
-   cursor:pointer;
+   cursor: pointer;
-   position:relative;
+   position: relative;
-   padding:4px;
+   padding: 4px;
-   color:#262626;
+   color: #262626;
-   text-align:left;
+   text-align: left;
-   transition:.1s;
+   transition: .1s;
-   -webkit-user-select:none;
+   -webkit-user-select: none;
-   -moz-user-select:none;
+   -moz-user-select: none;
-   -ms-user-select:none;
+   -ms-user-select: none;
-   user-select:none;
+   user-select: none;
-   outline:none
+   outline: none
 }
 
 ul li:nth-child(odd) {
-   background:#e2e2e2
+   background: #e2e2e2
 }
 
 ul li:hover {
-   background:#ca0707;
+   background: #ca0707;
-   color:#fff;
+   color: #fff;
-   border-color:#000
+   border-color: #000
 }
 
 ul li.checked:hover {
-   background:#ca0707;
+   background: #ca0707;
-   color:#fff
+   color: #fff
 }
 
 ul li.checked {
-   background:#434343;
+   background: #434343;
-   color:#fff;
+   color: #fff;
-   border-color:#262626
+   border-color: #262626
 }
 
 [draggable] {
@@ -301,103 +496,136 @@ ul li.checked {
 }
 
 #route_levels {
-   margin:10px 0px;
+   margin: 10px 0px;
 }
 
 #route_levels li {
-   padding:0px 10px;
+   padding: 0px 10px;
-   margin:0
+   margin: 0
 }
 
 #route_levels li.dragover {
-   padding-bottom:20px;
+   padding-bottom: 20px;
-   background-color:white
+   background-color: white
 }
 
 #route_levels li select {
-   margin:0;
+   margin: 0;
-   width:calc(100% - 40px);
+   width: calc(100% - 40px);
-   margin:0px 6px;
+   margin: 0px 6px;
-   color:black;
+   color: black;
-   background-color:inherit
+   background-color: inherit
 }
 
 #route_levels li select:hover {
-   color:white
+   color: white
 }
 
 #route_levels li:hover select {
-   color:white
+   color: white
 }
 
 #route_levels li:last-child {
-   padding-left:24px
+   padding-left: 24px
 }
 
-#route_levels li:last-child .route_remove, #route_levels li:last-child .route_drag {
+#route_levels li:last-child .route_remove,
-   display:none
+#route_levels li:last-child .route_drag {
+   display: none
 }
 
-#checklist li {
+#codelist {
+   margin-top: 10px;
+}
+
+#codelist li {
    padding-left: 26px;
 }
 
-#checklist li::before {
+#codelist li::before {
-   content:'';
+   content: '';
-   position:absolute;
+   position: absolute;
-   border-color:#a6a6a6;
+   border-color: #a6a6a6;
-   border-style:solid;
+   border-style: solid;
-   border-width:2px;
+   border-width: 2px;
-   border-radius:50%;
+   border-radius: 50%;
-   -webkit-transform: translateY(20%);
+   left: 6px;
-   -moz-transform: translateY(20%);
+   height: 10px;
-   -ms-transform: translateY(20%);
+   width: 10px
-   -o-transform: translateY(20%);
-   transform: translateY(20%);
-   transform: translateY(20%);
-   left:6px;
-   height:10px;
-   width:10px   
 }
 
-#checklist li:hover::before {
+#codelist li:hover::before {
-   border-color:#fff;
+   border-color: #fff;
-   background-color:#ffc0cb
+   background-color: #ffc0cb
 }
 
-#checklist li.checked::before {
+#codelist li.checked::before {
-    border-color:#fff;
+   border-color: #fff;
-    background-color:#d85e55
+   background-color: #d85e55
 }
 
 .dragelement {
-   opacity:0.3
+   opacity: 0.3
 }
 
 .route_remove {
-   background:inherit;
+   background: inherit;
-   color:red;
+   color: red;
-   font-weight:bold;
+   font-weight: bold;
-   border-radius:0;
+   border-radius: 0;
-   vertical-align:middle;
+   vertical-align: middle;
-   padding:0
+   padding: 0
 }
 
 .route_remove:hover {
-   background:inherit;
+   background: inherit;
-   color:white
+   color: white
 }
 
 .route_drag {
-   display:inline;
+   display: inline;
-   background-color:inherit;
+   background-color: inherit;
-   color:#aaa;
+   color: #aaa;
-   border-radius:0;
+   border-radius: 0;
-   vertical-align:middle;
+   vertical-align: middle;
-   margin:0;
+   margin: 0;
-   padding:0
+   padding: 0
 }
 
-.route_clear, .route_presets {
+.route_clear,
-   display:inline-block
+.route_presets {
+   display: inline-block
+}
+
+#descriptionbox hr {
+   margin: 15px 5px;
+}
+
+#smscommunity {
+   text-align: center;
+   font-weight: bold
+}
+
+#smscommunity img {
+   margin: 0px 5px;
+}
+
+#changelog {
+   margin-top: 10px;
+}
+
+.change {
+   margin: 3px 0px 3px 5px;
+}
+
+.change div {
+   display: inline-block;
+}
+
+.change div:first-child {
+   width: 100px;
+}
+
+.hidden {
+   display: none !important
 }