   const F1menuText =
   `



<style>
body { background-color: white; font-size: 32px; font-family: JungYulKim2; }
.xyl1 { color: grey; font-weight: bold; }
.xyl5 { color: grey; font-weight: bold; }
.xyl0 { font-size: 36px; color: black; }
.xyl2 { font-size: 36px; color: magenta; }

.xyl7 { font-size: 36px; color: green; }
.xyl8 { font-size: 36px; color: darkmagenta; }
.xyl9 { font-size: 36px; color: red; }

.xyl3 { font-size: 36px; color: darkgreen; }
.xyl4 { font-size: 36px; color: green; font-style: italic; }

.heading1 { color: black; font-size: 1.4em; text-decoration: underline; }
.heading2 { color: magenta; font-size: 1.4em; text-decoration: underline; }
.heading3 { color: darkgreen; font-size: 1.4em; text-decoration: underline; }
.truth { color: black; font-size: 56px; text-align: center; padding: 64px; padding-bottom: 0px; }
.truth1 { color: black; font-size: 48px; text-align: center; padding: 64px; padding-top: 0px; }
.greeting { color: black; font-size: 32px; text-align: center; }

.header { font-size: 64px; color: black; font-weight: bold; text-align: center; }
</style>

<div style="background-color: rgba(255,255,255,1);">



   <a href="https://hdub.neocities.org/hdub-original.html"
     style="position: fixed;
              bottom: 0px;
               left: 64px;
           font-size: 48px;
         text-shadow:  1px  1px  4px lime,
                      -1px -1px  4px lime,
                      -1px  1px  4px lime,
                       1px -1px  4px lime;"
   ><p>try out original quirky hdub! (totally different)</p></a>

<p class="truth">
    لَا إِلَٰهَ إِلَّا ٱللَّٰهُ مُحَمَّدٌ رَسُولُ ٱللَّٰه
</p>
<p class="truth1">The LORD who created us is the Greatest of All.</p>
<p class="greeting">Assalamu Alaikum, and welcome to HDUB, a program for Drafting HTML.</p>
   


<br><br>


<header class="header"><a href="https://github.com/dckimMysteryAuthor/HW-HTML-Drafting-Project">HW HTML DRAFTING PROJECT</a><br>Mouse and Keyboard Descriptions</header>



<br><br>

<p><span class="heading1">NEW: Mouse Functionality Described in Brief</span></p>
<br>
<p class="xyl0">The mouse functions have recently been enhanced greatly. The program now features 'draggable' edges, which is very convenient. The drag edges are used when the mouse is within the visible 'drag-region'. Keep in mind that the corners also work as expected.</p>
<br>
<p class="xyl0">The left mouse button will drag to move parts around on the screen, as usual. The left mouse button can now also enter new parts by dragging on the screen where there is no part currently placed. To place a new part, while beginning the action on top of another part, we must hold 'CTRL + SHIFT', as usual.</p>
<br>
<p class="xyl0">The middle mouse button can be clicked on top of a part to remove that part. The part can then be re-inserted in the usual way, using 'P'.</p>
<br>
<p class="xyl0">Double clicking on a part with 'left-click' will now make a duplicate of that part exactly in place. Holding down the 'CTRL' key and then dragging will also make duplicates quickly. Double clicking on a blank area of the screen now places the cursor and gives keyboard focus to it. Then we can use a single click to place the cursor around the scree.</p>
<br>
<p class="xyl0">The 'right-click' of the mouse, as before, is left completely for use by the web browser, which has many interesting and useful features accessible that way. No need to over-ride those wonderful features.</p>
<br>
<p class="xyl0">Hovering over a part and using 'CTRL + C' or 'CTRL + V' will copy and paste the internal stuff of the part. However, if we use the 'Y' key in style mode, we will copy the internal navigation link from the part onto the computer's clipboard. We can then paste it onto the desired part using 'CTRL + V'. This is a convenient way of making the internal hyper-links.</p>
<br>
<p class="xyl0">The mouse is also used to drag files into the program, using the mouse. We can easily drag in Image, Audio, and Video files. The parts will appear exactly at the place that we drag them to(top left corner). Dragging text files and HTML files is different. At present, we must drag those type of file directly onto a part in the program, so we need to have a part there in the program ready for this. This is a good method, because we can keep HTML particles as files somewhere in our local system, and we don't need to find the file through the dialogue. Keep in mind that HTML and text can also be copied in using 'CTRL + C' and 'CTRL + V'.</p>
<br>
<p class="xyl0">The mouse is also used to drag 'templating' information while we use 'backspace mode', but, this system is not fully developed and exposed yet. It can be used, but, it's a kind of 'do-it-youself' at this point.</p>
<br>
<p><span class="heading1">Minor Image Editing from the mouse.</span></p>
<br>
<p class="xyl0">Start by dragging a file into the background: Hold 'ALT' while dragging from the file system. 'SHIFT + Double-click' on a part to crop the image inside of it. Use 'SHIFT + 1' to save the internal image. Use 'ALT + Double-click' to stamp the image from the part back down against the background image.</p>
<br>
<p class="xyl0">We can easily change the background image boundary by placing an empty part in the top left corner and using 'ALT + Double-click' on it.</p>
<br>
<p class="xyl0">***The image working stuff is new, and I might expand it later. At present, it seems very useful.</p>
<br>
<br>
<p><span class="heading1">BIG TIP: Use 'ENTER' to get into the 'live view' mode, and use 'ESCAPE' to get back out of it.</span></p>
<p class="xyl0">Also, in style-mode(caps lock off), be aware of the <u><b>'E' and 'Z' keys(a good way to remember: "It's E-Z")</b></u>. They will let you set the 'content-editable' and 'lower the shield'. This is a quick way to get you started with writing text into the boxes.</p>
<br>

<br>

<p><span class="xyl5" style="text-align: center;">AS A SUMMARY AND A HELPFUL ADVICE ON HOW TO READ THIS TABLE: </span></p>
<br>
<p><span class="xyl5">***If you use the 'ENTER' key here, then you will need to use the 'ESCAPE' key to get back out of here with F1, because we are kinda still inside of the HW program.***</span></p>
<br>
<p><span class="xyl5" style="color: magenta;">***NEW: TRY THE 'TAB' KEY TO GET A CLICKABLE USER INTERFACE. (shift + tab will put it into the program as a part! Many of these buttons will work from a new window)***</span></p>
<br>

<p><span class="xyl5">This gives most of the key bindings for the program. It is helpful to notice that many of the key functions are very similar when used with the SHIFT key. The difference will be that, while using the SHIFT key, the function will be applied to an entire colour group, instead of only the item in focus. This is a general rule. Knowing this, you can see that this list of keys is actually very short and you can probably skip over the ones that are basically duplicates. I have helped a little bit by setting the duplicated ones in italics. (mostly in style mode)</span></p>
<br>

<p class="xyl0">QUICK LOOK-UP Cross-Mode: 
<br>

<a id="cMESCreturn" href="#cMESC">ESC</a>
<a id="cMAAreturn"  href="#cMAA">space</a>
<a id="cMBBreturn"  href="#cMBB">enter</a>
<a id="cMSreturn"   href="#cMS">backspace</a>
<a id="cMUreturn"   href="#cMU">F1</a> 
<a id="cMVreturn"   href="#cMV">ins</a> 
<a id="cMWreturn"   href="#cMW">home</a> 
<a id="cMXreturn"   href="#cMX">page up</a> 
<a id="cMYreturn"   href="#cMY">delete</a> 
<a id="cMZreturn"   href="#cMZ">end</a> 
<a id="cMS2return"  href="#cMS2">page down</a> 
<a id="cMT2return"  href="#cMT2">caps</a> 
<a id="cMU2return"  href="#cMU2">up arrow</a> 
<a id="cMV2return"  href="#cMV2">down arrow</a> 
<a id="cMW2return"  href="#cMW2">left arrow</a> 
<a id="cMX2return"  href="#cMX2">right arrow</a>  
<a id="cMCCreturn"  href="#cMCC">\`</a>
<a id="cMDDreturn"  href="#cMDD">1</a>
<a id="cMEEreturn"  href="#cMEE">2</a>
<a id="cMFFreturn"  href="#cMFF">3</a>
<a id="cMGGreturn"  href="#cMGG">4</a>
<a id="cMHHreturn"  href="#cMHH">5</a>
<a id="cMIIreturn"  href="#cMII">6</a>
<a id="cMJJreturn"  href="#cMJJ">7</a>
<a id="cMKKreturn"  href="#cMKK">8</a>
<a id="cMLLreturn"  href="#cMLL">9</a>
<a id="cMMMreturn"  href="#cMMM">0</a>
<a id="cMNNreturn"  href="#cMNN">-</a>
<a id="cMOOreturn"  href="#cMOO">=</a>
<a id="cMPPreturn"  href="#cMPP">~</a>
<a id="cMQQreturn"  href="#cMQQ">!</a>
<a id="cMRRreturn"  href="#cMRR">@</a>
<a id="cMSSreturn"  href="#cMSS">#</a>
<a id="cMTTreturn"  href="#cMTT">$</a>
<a id="cMUUreturn"  href="#cMUU">%</a>
<a id="cMVVreturn"  href="#cMVV">^</a>
<a id="cMWWreturn"  href="#cMWW">&</a>
<a id="cMXXreturn"  href="#cMXX">*</a>
<a id="cMYYreturn"  href="#cMYY">(</a>
<a id="cMZZreturn"  href="#cMZZ">)</a>
<a id="cMAreturn"   href="#cMA">_</a>
<a id="cMBreturn"   href="#cMB">+</a>
<a id="cMCreturn"   href="#cMC">[</a>
<a id="cMDreturn"   href="#cMD">]</a>
<a id="cMEreturn"   href="#cME">\</a>
<a id="cMFreturn"   href="#cMF">;</a>
<a id="cMGreturn"   href="#cMG">'</a>
<a id="cMHreturn"   href="#cMH">,</a>
<a id="cMIreturn"   href="#cMI">.</a>
<a id="cMJreturn"   href="#cMJ">/</a>
<a id="cMKreturn"   href="#cMK">{</a>
<a id="cMLreturn"   href="#cML">}</a>
<a id="cMMreturn"   href="#cMM">|</a>
<a id="cMNreturn"   href="#cMN">:</a>
<a id="cMOreturn"   href="#cMO">"</a>
<a id="cMPreturn"   href="#cMP"><</a>
<a id="cMQreturn"   href="#cMQ">></a>
<a id="cMRreturn"   href="#cMR">?</a>
</p>

<br>

<p class="xyl2">ALPHABETICAL LOOK-UP Construction-Mode: 
<br>
<a id="coMAreturn" href="#coMA">A</a>
<a id="coMBreturn" href="#coMB">B</a>
<a id="coMCreturn" href="#coMC">C</a>
<a id="coMDreturn" href="#coMD">D</a>
<a id="coMEreturn" href="#coME">E</a>
<a id="coMFreturn" href="#coMF">F</a>
<a id="coMGreturn" href="#coMG">G</a>
<a id="coMHreturn" href="#coMH">H</a>
<a id="coMIreturn" href="#coMI">I</a>
<a id="coMJreturn" href="#coMJ">J</a>
<a id="coMKreturn" href="#coMK">K</a>
<a id="coMLreturn" href="#coML">L</a>
<a id="coMMreturn" href="#coMM">M</a>
<a id="coMNreturn" href="#coMN">N</a>
<a id="coMOreturn" href="#coMO">O</a>
<a id="coMPreturn" href="#coMP">P</a>
<a id="coMQreturn" href="#coMQ">Q</a>
<a id="coMRreturn" href="#coMR">R</a>
<a id="coMSreturn" href="#coMS">S</a>
<a id="coMTreturn" href="#coMT">T</a>
<a id="coMUreturn" href="#coMU">U</a>
<a id="coMVreturn" href="#coMV">V</a>
<a id="coMWreturn" href="#coMW">W</a>
<a id="coMXreturn" href="#coMX">X</a>
<a id="coMYreturn" href="#coMY">Y</a>
<a id="coMZreturn" href="#coMZ">Z</a>
</p>

<br>

<p class="xyl2">ALPHABETICAL LOOK-UP Construction-Mode 'SHIFT+': 
<br>
<a id="coMAreturnShift" href="#coMAshift">A</a>
<a id="coMBreturnShift" href="#coMBshift">B</a>
<a id="coMCreturnShift" href="#coMCshift">C</a>
<a id="coMDreturnShift" href="#coMDshift">D</a>
<a id="coMEreturnShift" href="#coMEshift">E</a>
<a id="coMFreturnShift" href="#coMFshift">F</a>
<a id="coMGreturnShift" href="#coMGshift">G</a>
<a id="coMHreturnShift" href="#coMHshift">H</a>
<a id="coMIreturnShift" href="#coMIshift">I</a>
<a id="coMJreturnShift" href="#coMJshift">J</a>
<a id="coMKreturnShift" href="#coMKshift">K</a>
<a id="coMLreturnShift" href="#coMLshift">L</a>
<a id="coMMreturnShift" href="#coMMshift">M</a>
<a id="coMNreturnShift" href="#coMNshift">N</a>
<a id="coMOreturnShift" href="#coMOshift">O</a>
<a id="coMPreturnShift" href="#coMPshift">P</a>
<a id="coMQreturnShift" href="#coMQshift">Q</a>
<a id="coMRreturnShift" href="#coMRshift">R</a>
<a id="coMSreturnShift" href="#coMSshift">S</a>
<a id="coMTreturnShift" href="#coMTshift">T</a>
<a id="coMUreturnShift" href="#coMUshift">U</a>
<a id="coMVreturnShift" href="#coMVshift">V</a>
<a id="coMWreturnShift" href="#coMWshift">W</a>
<a id="coMXreturnShift" href="#coMXshift">X</a>
<a id="coMYreturnShift" href="#coMYshift">Y</a>
<a id="coMZreturnShift" href="#coMZshift">Z</a>
</p>


<br>

<p class="xyl2">NUMBER-PAD TUNER REFERENCES, CONSTRUCTION-MODE:
<br>
<a id="nTWreturn"   href="#nTW">'W' - Window Tuner</a>
<br>
<a id="nTGreturn"   href="#nTG">'G' - Cursor Tuner</a> 
<br>
<a id="nTEreturn"   href="#nTE">'E' - Part Rotation Tuner</a> 
<br>
<a id="nTDreturn"   href="#nTD">'D' - Part Position Tuner</a> 
<br>
<a id="nTTreturn"   href="#nTT">'T' - Group Arrangement Tuner</a> 
</p>


<br>

<p class="xyl3">ALPHABETICAL LOOK-UP Style-Mode: 
<br>
<a id="sMAreturn" href="#sMA">A</a>
<a id="sMBreturn" href="#sMB">B</a>
<a id="sMCreturn" href="#sMC">C</a>
<a id="sMDreturn" href="#sMD">D</a>
<a id="sMEreturn" href="#sME">E</a>
<a id="sMFreturn" href="#sMF">F</a>
<a id="sMGreturn" href="#sMG">G</a>
<a id="sMHreturn" href="#sMH">H</a>
<a id="sMIreturn" href="#sMI">I</a>
<a id="sMJreturn" href="#sMJ">J</a>
<a id="sMKreturn" href="#sMK">K</a>
<a id="sMLreturn" href="#sML">L</a>
<a id="sMMreturn" href="#sMM">M</a>
<a id="sMNreturn" href="#sMN">N</a>
<a id="sMOreturn" href="#sMO">O</a>
<a id="sMPreturn" href="#sMP">P</a>
<a id="sMQreturn" href="#sMQ">Q</a>
<a id="sMRreturn" href="#sMR">R</a>
<a id="sMSreturn" href="#sMS">S</a>
<a id="sMTreturn" href="#sMT">T</a>
<a id="sMUreturn" href="#sMU">U</a>
<a id="sMVreturn" href="#sMV">V</a>
<a id="sMWreturn" href="#sMW">W</a>
<a id="sMXreturn" href="#sMX">X</a>
<a id="sMYreturn" href="#sMY">Y</a>
<a id="sMZreturn" href="#sMZ">Z</a>
</p>

<br>

<p class="xyl3">ALPHABETICAL LOOK-UP Style-Mode 'SHIFT+': 
<br>
<a id="sMAreturnShift" href="#sMAshift">A</a>
<a id="sMBreturnShift" href="#sMBshift">B</a>
<a id="sMCreturnShift" href="#sMCshift">C</a>
<a id="sMDreturnShift" href="#sMDshift">D</a>
<a id="sMEreturnShift" href="#sMEshift">E</a>
<a id="sMFreturnShift" href="#sMFshift">F</a>
<a id="sMGreturnShift" href="#sMGshift">G</a>
<a id="sMHreturnShift" href="#sMHshift">H</a>
<a id="sMIreturnShift" href="#sMIshift">I</a>
<a id="sMJreturnShift" href="#sMJshift">J</a>
<a id="sMKreturnShift" href="#sMKshift">K</a>
<a id="sMLreturnShift" href="#sMLshift">L</a>
<a id="sMMreturnShift" href="#sMMshift">M</a>
<a id="sMNreturnShift" href="#sMNshift">N</a>
<a id="sMOreturnShift" href="#sMOshift">O</a>
<a id="sMPreturnShift" href="#sMPshift">P</a>
<a id="sMQreturnShift" href="#sMQshift">Q</a>
<a id="sMRreturnShift" href="#sMRshift">R</a>
<a id="sMSreturnShift" href="#sMSshift">S</a>
<a id="sMTreturnShift" href="#sMTshift">T</a>
<a id="sMUreturnShift" href="#sMUshift">U</a>
<a id="sMVreturnShift" href="#sMVshift">V</a>
<a id="sMWreturnShift" href="#sMWshift">W</a>
<a id="sMXreturnShift" href="#sMXshift">X</a>
<a id="sMYreturnShift" href="#sMYshift">Y</a>
<a id="sMZreturnShift" href="#sMZshift">Z</a>
</p>


<br>

<p class="xyl3">NUMBER-PAD TUNER REFERENCES, STYLE-MODE:
<br>
<a id="nTPreturn"   href="#nTP">'P' - Padding<nd Font-Style Tuner/a> 
<br>
<a id="nTAreturn"   href="#nTA">'A' - Alignment and Spacing Tuner</a> 
<br>
<a id="nTRreturn"   href="#nTR">'R' - Border-Radius/Outline Tuner</a>
<br>
<a id="nTFreturn"   href="#nTF">'F' - Font-Size and Text-Shadow Tuner (counter-tints)</a> 
<br>
<a id="nTUreturn"   href="#nTU">'U' - Box-Shadow Tuner (counter-tints)</a> 
</p>

<br><br><br>


<p><span class="heading1">CROSS-MODE KEYBOARD KEYS:<br>(normally available in either mode)</span></p>


<p><span class="xyl5">These 'letters' are also listed elsewhere and are repeated here for convenience.</span></p>

<p><a>/*    Q    */ </a><span class="xyl0">Quit and make a 'QUIT-SAVE'.</span></p>
<p><a>/*  SHIFT + Q  */ </a><span class="xyl0">Quit the program but, first save the file as 'QUITSAVE'.</span></p>
<p><a>/*    S    */ </a><span class="xyl0">Save HTML, prompt for a filename only if one has not been set.</span></p>
<p><a>/*  SHIFT + S  */ </a><span class="xyl0">Prompt for a new filename and then save the file as '.html'</span></p>
<p><a>/*    T    */ </a><span class="xyl0">Change to 't-colouring-mode'. We can then colour by using the mouse with 'ctrl', 'shift', or 'ctrl + shift'.</span></p>
<p><a>/*  SHIFT + T  */ </a><span class="xyl0">Assign all colours to be the same, cycling throught the three options. This is for the 'three-colour-system'.</span></p>
<p><a>/*    V    */ </a><span class="xyl0">Global re-flowing of the entire document. Top-Left is first.</span></p>
<p><a>/*  SHIFT + V  */ </a><span class="xyl0">Re-flow the entire document favouring the colour groups in the new ordering. First use everything grey, then use everything pink, and finally, use everything blue.</span></p>

<p><a id="cMESC"  href="#cMESCreturn">/*  Escape */</a> <span class="xyl9"> Return to construction mode, reverting after pressing 'enter' or 'backspace'.</span></p>
<p><a id="cMAA" href="#cMAAreturn">/*  space  */ </a><span class="xyl9"> This will give a quick preview of the finished website while the key is held down, and return to construction mode when the key is released.</span></p>
<p><a id="cMBB" href="#cMBBreturn">/*  enter  */ </a><span class="xyl9"> This will give a live view of the website. The keyboard will no longer be controlled by the program (except for the number pad and the escape key). The number pad will still be available and can use the selected 'tuner' for changing styles, etc. The escape key will return us to the construction mode and re-enable the keyboard interface for the program. This feature is very convenient for use with the content editables (style mode 'e'), allowing us to enter text directly in. This will then be similar to a 'what you see is what you can get' style editor.</span></p>





<p><a id="cMS"  href="#cMSreturn">/*backspace*/</a> <span class="xyl2"></span></p>
<p><span class="xyl9">Turn off all of the construction rendering, and expose the '<b>DRAG-PULL</b>' textually on to the face of each item. This allows information from the Object, namely it's styles and or attributes to be dragged textually as part of the drag-and-drop regiment for the program.</span></p>

<p><a id="cMU"  href="#cMUreturn">/*   F1    */</a> <span class="xyl0"> Open this keylist in a new window.</span></p>
<p><a id="cMV"  href="#cMVreturn">/*   ins   */</a> <span class="xyl0"> Paste the grey group back onto the screen.</span></p>
<p><a id="cMW"  href="#cMWreturn">/*   home  */</a> <span class="xyl0"> Paste the pink group back onto the screen.</span></p>
<p><a id="cMX"  href="#cMXreturn">/* page up */</a> <span class="xyl0"> Paste the blue group back onto the screen.</span></p>
<p><a id="cMY"  href="#cMYreturn">/*  delete */</a> <span class="xyl0"> Remove the grey group from the screen.</span></p>
<p><a id="cMZ"  href="#cMZreturn">/*   end   */</a> <span class="xyl0"> Remove the grey group from the screen.</span></p>
<p><a id="cMS2" href="#cMS2return">/*page down*/</a> <span class="xyl0"> Remove the grey group from the screen.</span></p>
<p><a id="cMT2" href="#cMT2return">/*  caps   */</a> <span class="xyl0"> Change modes between Construction Mode (caps lock on) and Style Mode (caps lock off).</span></p>
<p><a id="cMU2" href="#cMU2return">/*   up arr*/</a> </span></p>
<p><a id="cMV2" href="#cMV2return">/* down arr*/</a> </span></p>
<p><a id="cMW2" href="#cMW2return">/* left arr*/</a> </span></p>
<p><a id="cMX2" href="#cMX2return">/*right arr*/</a> </span></p>
<p><span class="xyl0">The arrow keys will behave differently depending on modifier keys which are used together with them.</span></p>

<p><span class="xyl0">Used alone the arrow keys will move the selected part and align it's centre with the grid-line centre.</span></p>
<p><span class="xyl0">With the 'ctrl' modifier key, the screen will scroll by one grid spacing (in-Shallah).</span></p>
<p><span class="xyl0">With the 'shift' modifier key, all of the parts in the document will be moved at the same time.</span></p>





<p><a id="cMCC" href="#cMCCreturn">/*    \`    */ </a><span class="xyl0"> Save file as '.php'                                      </span></p>
<p><a id="cMDD" href="#cMDDreturn">/*    1    */ </a><span class="xyl0"> Switch to layer 1.                                       </span></p>
<p><a id="cMEE" href="#cMEEreturn">/*    2    */ </a><span class="xyl0"> Switch to layer 2.                                       </span></p>
<p><a id="cMFF" href="#cMFFreturn">/*    3    */ </a><span class="xyl0"> Switch to layer 3.                                       </span></p>
<p><a id="cMGG" href="#cMGGreturn">/*    4    */ </a><span class="xyl0"> Switch to layer 4.                                       </span></p>
<p><a id="cMHH" href="#cMHHreturn">/*    5    */ </a><span class="xyl0"> Switch to layer 5.                                       </span></p>
<p><a id="cMII" href="#cMIIreturn">/*    6    */ </a><span class="xyl0"> Switch to layer 6.                                       </span></p>
<p><a id="cMJJ" href="#cMJJreturn">/*    7    */ </a><span class="xyl0"> Switch to layer 7.                                       </span></p>
<p><a id="cMKK" href="#cMKKreturn">/*    8    */ </a><span class="xyl0"> Switch to layer 8.                                       </span></p>
<p><a id="cMLL" href="#cMLLreturn">/*    9    */ </a><span class="xyl0"> Switch to layer 9.                                       </span></p>
<p><a id="cMMM" href="#cMMMreturn">/*    0    */ </a><span class="xyl0">                            Not In Use (yet).             </span></p>
<p><a id="cMNN" href="#cMNNreturn">/*    -    */ </a><span class="xyl0"> Decrease Grid Size.                                      </span></p>
<p><a id="cMOO" href="#cMOOreturn">/*    =    */ </a><span class="xyl0"> Increase Grid Size.                                      </span></p>
<p><a id="cMPP" href="#cMPPreturn">/*    ~    */ </a><span class="xyl0"> Set filename and then save as '.php'</span></p>
<p><a id="cMQQ" href="#cMQQreturn">/*    !    */ </a><span class="xyl0"> Save the image from the part.</span></p>
<p><a id="cMRR" href="#cMRRreturn">/*    @    */ </a><span class="xyl9"> Set the Object's '<b>DRAG-PULL</b>' based on the active 'tuner'.</span></p>
<p><a id="cMSS" href="#cMSSreturn">/*    #    */ </a><span class="xyl0"> Toggle Part Names on or off.</span></p>
<p><a id="cMTT" href="#cMTTreturn">/*    $    */ </a><span class="xyl7"> Change focus to the last part in the document order.</span></p>
<p><a id="cMUU" href="#cMUUreturn">/*    %    */ </a><span class="xyl0"> Set the 'z-echelon'. This is an additive number applied to the entire document when 'z' is used. The result is z-index isolation groups (echelons).</span></p>
<p><a id="cMVV" href="#cMVVreturn">/*    ^    */ </a><span class="xyl7"> Change focus to the first part in the document order.</span></p>
<p><a id="cMWW" href="#cMWWreturn">/*    &    */ </a><span class="xyl0"> Load in a bunch of Font related templates for use with 'drag-pull'. Use with 'backspace'.</span></p>

<p><a id="cMXX" href="#cMXXreturn">/*    *    */ </a><span class="xyl8"> Set the browser to fullscreen</span></p>
<p><a id="cMYY" href="#cMYYreturn">/*    (    */ </a><span class="xyl8"> Load in all HTML named colours as 'drag-pull' templates. Use with 'backspace'.</span></p>
<p><a id="cMZZ" href="#cMZZreturn">/*    )    */ </a><span class="xyl8"> Load in RGBA colour templates as 'drag-pull'. Use with 'backspace'.</span></p>

<p><a id="cMA" href="#cMAreturn">/*    _    */ </a><span class="xyl0"> Decrease Grid Size.</span></p>
<p><a id="cMB" href="#cMBreturn">/*    +    */ </a><span class="xyl0"> Increase Grid Size.</span></p>
<p><a id="cMC" href="#cMCreturn">/*    [    */ </a><span class="xyl0"> Decrease Grid Size.                                      </span></p>
<p><a id="cMD" href="#cMDreturn">/*    ]    */ </a><span class="xyl0"> Increase Grid Size.                                      </span></p>
<p><a id="cME" href="#cMEreturn">/*    \    */ </a><span class="xyl7"> Change focus to the next colour group.                   </span></p>
<p><a id="cMF" href="#cMFreturn">/*    ;    */ </a><span class="xyl7"> Change focus to the next item in the document order.     </span></p>
<p><a id="cMG" href="#cMGreturn">/*    '    */ </a><span class="xyl7"> Set the focus on the alphabetical register, press a 'letter' after. (like VI)    </span></p>
<p><a id="cMH" href="#cMHreturn">/*    ,    */ </a><span class="xyl7"> Change focus to the previous item in the document order. </span></p>
<p><a id="cMI" href="#cMIreturn">/*    .    */ </a><span class="xyl7"> Change focus to the next item in the document order.     </span></p>
<p><a id="cMJ" href="#cMJreturn">/*    /    */ </a><span class="xyl0"> Decrease the grid size.                                  </span></p>
<p><a id="cMK" href="#cMKreturn">/*    {    */ </a><span class="xyl0"> Decrease grid size by one pixel.</span></p>
<p><a id="cML" href="#cMLreturn">/*    }    */ </a><span class="xyl0"> Increase grid size by one pixel.</span></p>
<p><a id="cMM" href="#cMMreturn">/*    |    */ </a><span class="xyl7"> Change focus to the first part in the document order.</span></p>
<p><a id="cMN" href="#cMNreturn">/*    :    */ </a><span class="xyl7"> Change focus to the previous item in the document order.</span></p>
<p><a id="cMO" href="#cMOreturn">/*    "    */ </a><span class="xyl0"> Enter a new part at the cursor location. The grid size will determine the size of the part.</span></p>
<p><a id="cMP" href="#cMPreturn">/*    <    */ </a><span class="xyl7"> Change focus to the previous item in the document order.      </span></p>
<p><a id="cMQ" href="#cMQreturn">/*    >    */ </a><span class="xyl7"> Change focus to the next item in the document order.          </span></p>
<p><a id="cMR" href="#cMRreturn">/*    ?    */ </a><span class="xyl0"> Increase the grid size.</span></p>




<br><br><br>




<p><span class="heading2">THESE ARE THE KEYBOARD KEYS FOR CONSTRUCTION MODE:<br>(when the caps lock is on)</span></p>

<p><a id="coMQ" href="#coMQreturn">/*    Q    */ </a><span class="xyl2">Quit and make a 'QUIT-SAVE'.</span></p>
<p><a id="coMW" href="#coMWreturn">/*    W    */ </a><span class="xyl2">Change to 'window-mode' and/or toggle between 'window-move' and 'window-edge' (resize).</span></p>
<p><a id="coME" href="#coMEreturn">/*    E    */ </a><span class="xyl2">Change to 'edge-mode' and/or toggle between 'top-and-left' and 'bottom-and-right'.</span></p>
<p><a id="coMR" href="#coMRreturn">/*    R    */ </a><span class="xyl2">Flip the image 180 degrees.</span></p>
<p><a id="coMT" href="#coMTreturn">/*    T    */ </a><span class="xyl2">Change to 't-colouring-mode'. We can then colour by using the mouse with 'ctrl', 'shift', or 'ctrl + shift'.</span></p>
<p><a id="coMY" href="#coMYreturn">/*    Y    */ </a><span class="xyl2">Wrap all parts up with a snug fit.</span></p>
<p><a id="coMU" href="#coMUreturn">/*    U    */ </a><span class="xyl2">Unwrap parts.</span></p>
<p><a id="coMI" href="#coMIreturn">/*    I    */ </a><span class="xyl2">New part to the left of the currently focused part.</span></p>
<p><a id="coMO" href="#coMOreturn">/*    O    */ </a><span class="xyl2">New part above the currently focused part.</span></p>
<p><a id="coMP" href="#coMPreturn">/*    P    */ </a><span class="xyl2">Paste out the last part that was removed using 'x'. This is 'last-in-first-out'.</span></p>
<p><a id="coMA" href="#coMAreturn">/*    A    */ </a><span class="xyl2">New part to the right of the currently focused part.</span></p>
<p><a id="coMS" href="#coMSreturn">/*    S    */ </a><span class="xyl2">Save HTML, prompt for a filename only if one has not been set.</span></p>
<p><a id="coMD" href="#coMDreturn">/*    D    */ </a><span class="xyl2">Set duplication mode. This affects 'a-i-o'.</span></p>
<p><a id="coMF" href="#coMFreturn">/*    F    */ </a><span class="xyl2">Copy the part from the register letter. Enter the register letter immediately following pressing 'f'. (similar to VI)</span></p>
<p><a id="coMG" href="#coMGreturn">/*    G    */ </a><span class="xyl2">Change to grab mode. This is a safe key to press when we are unsure of what mode we are currently in. Because of how the program must operate, when we change focus between different browser windows and then use the caps lock key, it is not so easy to tell what mode we are in. We need to press a letter key for the program to know what mode we are using. 'g' is the safest key to press because it does not effect any actions.</span></p>
<p><a id="coMH" href="#coMHreturn">/*    H    */ </a><span class="xyl2"></span></p>
<p><a id="coMJ" href="#coMJreturn">/*    J    */ </a><span class="xyl2"></span></p>
<p><a id="coMK" href="#coMKreturn">/*    K    */ </a><span class="xyl2"></span></p>
<p><a id="coML" href="#coMLreturn">/*    L    */ </a><span class="xyl2"></span></p>

<p><span class="xyl2">With 'd' or 'g' these will move the part, aligning the part edge to the grid edge in the direction of travel.</span></p>
<p><span class="xyl2">When using 't', 'j' and 'k' will change the colour group of the part. 'h' and 'l' will change the focus to the next/previous part. 'SHIFT+H' and 'SHIFT+L' will colour the next/previous part to match the currently focused part.</span></p>
<p><span class="xyl2">Using 'z', 'h' and 'l' will set the currently focused part to be the highest/lowest. 'j' and 'k' will move the part up or down in the z-index order.</span></p>

<p><a id="coMZ" href="#coMZreturn">/*    Z    */ </a><span class="xyl2">Set 'z-index-mode'.</span></p>
<p><a id="coMX" href="#coMXreturn">/*    X    */ </a><span class="xyl2">Remove the current part and put it into the register. (last in first out). Bring the part back with 'p'.</span></p>
<p><a id="coMC" href="#coMCreturn">/*    C    */ </a><span class="xyl2">Move the special cursor to the currently focused part.</span></p>
<p><a id="coMV" href="#coMVreturn">/*    V    */ </a><span class="xyl2">Global re-flowing of the entire document. Top-Left is first.</span></p>
<p><a id="coMB" href="#coMBreturn">/*    B    */ </a><span class="xyl2">Put a collection of part info onto the face of the part.</span></p>
<p><a id="coMN" href="#coMNreturn">/*    N    */ </a><span class="xyl2">Make and explicit entry for top/left, width/height.</span></p>
<p><a id="coMM" href="#coMMreturn">/*    M    */ </a><span class="xyl2">Set the currently focused part into the register. (press the letter after pressing 'm', like VI).</span></p>


<p><a id="coMQshift" href="#coMQreturnShift">/*  SHIFT + Q  */ </a><span class="xyl2">Quit the program but, first save the file as 'QUITSAVE'.</span></p>
<p><a id="coMWshift" href="#coMWreturnShift">/*  SHIFT + W  */ </a><span class="xyl2">Open a file selection dialogue and append the chosen file to the current one.</span></p>
<p><a id="coMEshift" href="#coMEreturnShift">/*  SHIFT + E  */ </a><span class="xyl2">Toggle between scaling and edge-extension. Scale will be reset to 1.</span></p>
<p><a id="coMRshift" href="#coMRreturnShift">/*  SHIFT + R  */ </a><span class="xyl2">Pull the entire guide layer back into the document.</span></p>
<p><a id="coMTshift" href="#coMTreturnShift">/*  SHIFT + T  */ </a><span class="xyl2">Assign all colours to be the same, cycling throught the three options. This is for the 'three-colour-system'.</span></p>
<p><a id="coMYshift" href="#coMYreturnShift">/*  SHIFT + Y  */ </a><span class="xyl2">Wrap all of the document parts together inside of a new part. This will use the boundary of the browser window for the boundary of the 'wrapper-part'. TIP: Use 'm' in style mode to set this up as a 'scrolling-box'.</span></p>
<p><a id="coMUshift" href="#coMUreturnShift">/*  SHIFT + U  */ </a><span class="xyl2">Wrap parts in groups according to the three colour system.</span></p>
<p><a id="coMIshift" href="#coMIreturnShift">/*  SHIFT + I  */ </a><span class="xyl2">New part at the left edge of the browser window.</span></p>
<p><a id="coMOshift" href="#coMOreturnShift">/*  SHIFT + O  */ </a><span class="xyl2">New part directly above the current part.</span></p>
<p><a id="coMPshift" href="#coMPreturnShift">/*  SHIFT + P  */ </a><span class="xyl2">Paste back in from the 'SHIFT+X' deletion register.</span></p>
<p><a id="coMAshift" href="#coMAreturnShift">/*  SHIFT + A  */ </a><span class="xyl2">New part at the right edge of the browser window.</span></p>
<p><a id="coMSshift" href="#coMSreturnShift">/*  SHIFT + S  */ </a><span class="xyl2">Prompt for a new filename and then save the file as '.html'</span></p>
<p><a id="coMDshift" href="#coMDreturnShift">/*  SHIFT + D  */ </a><span class="xyl2">Insert a duplicate 'in-place'.</span></p>
<p><a id="coMFshift" href="#coMFreturnShift">/*  SHIFT + F  */ </a><span class="xyl2">Open another file, replacing the current one.</span></p>
<p><a id="coMGshift" href="#coMGreturnShift">/*  SHIFT + G  */ </a><span class="xyl2">Enter, automatically, as many parts as possible into the 'letter-registers' (like VI), labelling the parts with the letter. This will do up to a maximum of 26 and use all letters of the english alphabet.</span></p>
<p><a id="coMHshift" href="#coMHreturnShift">/*  SHIFT + H  */ </a><span class="xyl2"></span></p>
<p><a id="coMJshift" href="#coMJreturnShift">/*  SHIFT + J  */ </a><span class="xyl2"></span></p>
<p><a id="coMKshift" href="#coMKreturnShift">/*  SHIFT + K  */ </a><span class="xyl2"></span></p>
<p><a id="coMLshift" href="#coMLreturnShift">/*  SHIFT + L  */ </a><span class="xyl2"></span></p>

<p><span class="xyl2">When we are using 'd' or 'g' modes these will move entire colour groups.</span></p>
<p><span class="xyl2">When we are using 'e' these keys will extend opposite edges at the same time, maintaining the centre.</span></p>

<p><a id="coMZshift" href="#coMZreturnShift">/*  SHIFT + Z  */ </a><span class="xyl2">This will set the z-index with the colour groups separated in echelons. Lowest will be pink, middle will be grey, and the highest will be blue.</span></p>
<p><a id="coMXshift" href="#coMXreturnShift">/*  SHIFT + X  */ </a><span class="xyl2">Remove everything and put it into the register that is accessible by pressing 'SHIFT+P'.</span></p>
<p><a id="coMCshift" href="#coMCreturnShift">/*  SHIFT + C  */ </a><span class="xyl2">Move the currently focused item to the special-cursor location.</span></p>
<p><a id="coMVshift" href="#coMVreturnShift">/*  SHIFT + V  */ </a><span class="xyl2">Re-flow the entire document favouring the colour groups in the new ordering. First use everything grey, then use everything pink, and finally, use everything blue.</span></p>
<p><a id="coMBshift" href="#coMBreturnShift">/*  SHIFT + B  */ </a><span class="xyl2">If this window was opened by another window, copy the current contents of the 'opener-window' into this new window.</span></p>
<p><a id="coMNshift" href="#coMNreturnShift">/*  SHIFT + N  */ </a><span class="xyl2">Enter a new part at the cursor location.</span></p>
<p><a id="coMMshift" href="#coMMreturnShift">/*  SHIFT + M  */ </a><span class="xyl2">Copy all parts into the guide layer. Note: The guide layer is not rendered in the save document.</span></p>

<br>

<p><span class="heading2">NUMBER-PAD TUNER REFERENCES, CONSTRUCTION-MODE:</span></p>


<p><a id="nTW"   href="#nTWreturn">'W' - Window Tuner</a> <span class="xyl2">'+' and '-' will control the height. '/' and '*' will control the width. Numbers in the corners and at the centre will place the part at those positions. The remaining numbers will move the window around the screen.</span></p>
<p><a id="nTG"   href="#nTGreturn">'G' - Cursor Tuner</a> <span class="xyl2">Numbers will position the cursor on the part. '/' will place the cursor in the part centre. '*' will place the part with its centre at the cursor.</span></p>
<p><a id="nTE"   href="#nTEreturn">'E' - Part Rotation Tuner</a> <span class="xyl2">'+' and '-' will change the grid size. '/', '*', and the numbers will handle all rotations of the part. '0' will set the parts drag-pull to 'backgroundColor'. '.' will set the parts drag-pull to 'main.style.transform', (this allows the rotations you set to be dragged out as a transfer template when you are using 'backspace')</span></p>
<p><a id="nTD"   href="#nTDreturn">'D' - Part Position Tuner</a> <span class="xyl2">Position the part at the corners or centre with the numbers. '+' and '-' change the grid.</span></p>
<p><a id="nTT"   href="#nTTreturn">'T' - Group Arrangement Tuner</a> <span class="xyl2">The numbers will give a part arrangement that is stepped according to the grid size. '5' (centre) will centre the cursor in the window. '0' and '.' will give a horizontal or vertical (snug) arrangement.</span></p>



<br><br><br>



<p><span class="heading3">KEYBOARD WHEN STYLE MODE IS ACTIVE:<br>(caps lock is turned off)</span></span></p>

<p><span class="xyl1">Note: The lines which are in italics are basically the same functions as given already above, only they will instead take action on the entire colour group. As a general rule, shift makes many functions apply to the whole colour group.</span></p>

<p><a id="sMQ" href="#sMQreturn">/*    Q    */</a> <span class="xyl3">Quit and make a 'QUIT-SAVE'.</span></p>
<p><a id="sMW" href="#sMWreturn">/*    W    */</a> <span class="xyl3">Toggle 'user-select' to be 'none' or 'auto'.</span></p>
<p><a id="sME" href="#sMEreturn">/*    E    */</a> <span class="xyl3">Toggle 'content-editable'. If we use this, we should probably also use the 'z' button to lower the anchor.</span></p>
<p><a id="sMR" href="#sMRreturn">/*    R    */</a> <span class="xyl3">First press: Set the numpad-tuner to 'radius/outline'; Second Press: Apply the grid size to the border radius.</span></p>
<p><a id="sMT" href="#sMTreturn">/*    T    */</a> <span class="xyl3">Swap all colours. This maintains the groups but changes their colours.</span></p>
<p><a id="sMY" href="#sMYreturn">/*    Y    */</a> <span class="xyl3">Put the '#id' into the 'copy/paste buffer'. This will help to make a quick internal link by 'pasting' onto the target part with 'ctrl+v'.</span></p>
<p><a id="sMU" href="#sMUreturn">/*    U    */</a> <span class="xyl3">Set the box shadow from the grid, and/or set the numpad-tuner to work on the box-shadow.</span></p>
<p><a id="sMI" href="#sMIreturn">/*    I    */</a> <span class="xyl3">           No Function</span></p>
<p><a id="sMO" href="#sMOreturn">/*    O    */</a> <span class="xyl3">           No Function</span></p>
<p><a id="sMP" href="#sMPreturn">/*    P    */</a> <span class="xyl3">Set the padding from the grid size, and/or set the numpad-tuner to work on the padding.</span></p>
<p><a id="sMA" href="#sMAreturn">/*    A    */</a> <span class="xyl3">Cycle through text alignments.</span></p>
<p><a id="sMS" href="#sMSreturn">/*    S    */</a> <span class="xyl3">Save HTML, prompt for a filename only if one has not been set. This is the ideal button for making a quick save.</span></p>
<p><a id="sMD" href="#sMDreturn">/*    D    */</a> <span class="xyl3">Prompt for download-link entry.</span></p>
<p><a id="sMF" href="#sMFreturn">/*    F    */</a> <span class="xyl3">Set the font size from the grid size, and/or set the numpad tuner to work font and text-shadow.</span></p>
<p><a id="sMG" href="#sMGreturn">/*    G    */</a> <span class="xyl3">SAFE KEY, NO ACTION</span></p>
<p><a id="sMH" href="#sMHreturn">/*    H    */</a> <span class="xyl3">Increase the scale of the part. Currently, this will 'lock-out' edge extend mode.</span></p>
<p><a id="sMJ" href="#sMJreturn">/*    J    */</a> <span class="xyl3">Rotate left in z-axis. (flat)</span></p>
<p><a id="sMK" href="#sMKreturn">/*    K    */</a> <span class="xyl3">Rotate right in z-axis. (flat)</span></p>
<p><a id="sML" href="#sMLreturn">/*    L    */</a> <span class="xyl3">Decrease the scale of the part. Currently, this will 'lock-out' edge extend mode.</span></p>
<p><a id="sMZ" href="#sMZreturn">/*    Z    */</a> <span class="xyl3">Toggle the position of the 'anchor' within the part: From top to Bottom and vice versa.</span></p>
<p><a id="sMX" href="#sMXreturn">/*    X    */</a> <span class="xyl3">Clear all rotations.</span></p>
<p><a id="sMC" href="#sMCreturn">/*    C    */</a> <span class="xyl3">Prompt foreground colour entry (text colour).</span></p>
<p><a id="sMV" href="#sMVreturn">/*    V    */</a> <span class="xyl3">Perform a global reflowing of the document order.</span></p>
<p><a id="sMB" href="#sMBreturn">/*    B    */</a> <span class="xyl3">Prompt background colour entry.</span></p>
<p><a id="sMN" href="#sMNreturn">/*    N    */</a> <span class="xyl3">Prompt explicit entry for the internal 'div' of the part.</span></p>
<p><a id="sMM" href="#sMMreturn">/*    M    */</a> <span class="xyl3">Toggle between 'overflow: auto' and 'overflow: hidden' for the part which is currently in focus.</span></p>


<p><a id="sMQshift" href="#sMQreturnShift">/*  SHIFT + Q  */</a> <span class="xyl3">Perform a save and then quit. (save is made under the common name 'QUITSAVE'.</span></p>
<p><a id="sMWshift" href="#sMWreturnShift">/*  SHIFT + W  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Toggle 'user-select' to be 'none' or 'auto'.</span></p>
<p><a id="sMEshift" href="#sMEreturnShift">/*  SHIFT + E  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Toggle 'content-editable'. If we use this, we should probably also use the 'z' button to lower the anchor.</span></p>
<p><a id="sMRshift" href="#sMRreturnShift">/*  SHIFT + R  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: First press: Set the numpad-tuner to 'radius/outline'; Second Press: Apply the grid size to the border radius.</span></p>
<p><a id="sMTshift" href="#sMTreturnShift">/*  SHIFT + T  */</a> <span class="xyl3">Set all colours to the same colour. Then cycle through the three possible colour on the next presses.</span></p>
<p><a id="sMYshift" href="#sMYreturnShift">/*  SHIFT + Y  */</a> <span class="xyl3">Prompt for entry of to the href attribute. This may be a complete URL or anything acceptable in the attribute, even a filename from the same directory.</span></p>
<p><a id="sMUshift" href="#sMUreturnShift">/*  SHIFT + U  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Set the box shadow from the grid, and/or set the numpad-tuner to work on the box-shadow.</span></p>
<p><a id="sMIshift" href="#sMIreturnShift">/*  SHIFT + I  */</a> <span class="xyl3">           No Function (yet)</span></p>
<p><a id="sMOshift" href="#sMOreturnShift">/*  SHIFT + O  */</a> <span class="xyl3">           No Function (yet)</span></p>
<p><a id="sMPshift" href="#sMPreturnShift">/*  SHIFT + P  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Set the padding from the grid size, and/or set the numpad-tuner to work on the padding.</span></p>
<p><a id="sMAshift" href="#sMAreturnShift">/*  SHIFT + A  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Cycle through text alignments.</span></p>
<p><a id="sMSshift" href="#sMSreturnShift">/*  SHIFT + S  */</a> <span class="xyl3">Save HTML, prompt for a filename. This allows us to change the filename at any time.</span></p>
<p><a id="sMDshift" href="#sMDreturnShift">/*  SHIFT + D  */</a> <span class="xyl3">           No Function (yet)</span></p>
<p><a id="sMFshift" href="#sMFreturnShift">/*  SHIFT + F  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Set the font size from the grid size, and/or set the numpad tuner to work font and text-shadow.</span></p>
<p><a id="sMGshift" href="#sMGreturnShift">/*  SHIFT + G  */</a> <span class="xyl3">SAFE KEY, NO ACTION</span></p>
<p><a id="sMHshift" href="#sMHreturnShift">/*  SHIFT + H  */</a> <span class="xyl3">Rotate to the left (y-axis)</span></p>
<p><a id="sMJshift" href="#sMJreturnShift">/*  SHIFT + J  */</a> <span class="xyl3">Rotate Under (x-axis)</span></p>
<p><a id="sMKshift" href="#sMKreturnShift">/*  SHIFT + K  */</a> <span class="xyl3">Rotate Over (x-axis)</span></p>
<p><a id="sMLshift" href="#sMLreturnShift">/*  SHIFT + L  */</a> <span class="xyl3">Rotate to the right (y-axis)</span></p>
<p><a id="sMZshift" href="#sMZreturnShift">/*  SHIFT + Z  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Toggle the position of the 'anchor' within the part: From top to Bottom and vice versa.</span></p>
<p><a id="sMXshift" href="#sMXreturnShift">/*  SHIFT + X  */</a> <span class="xyl3">Clear/Reset the scale of the part.</span></p>
<p><a id="sMCshift" href="#sMCreturnShift">/*  SHIFT + C  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Prompt foreground colour entry (text colour).</span></p>
<p><a id="sMVshift" href="#sMVreturnShift">/*  SHIFT + V  */</a> <span class="xyl3">Re-flow the entire document favouring the colour groups in the new ordering. First use everything grey, then use everything pink, and finally, use everything blue.</span></p>
<p><a id="sMBshift" href="#sMBreturnShift">/*  SHIFT + B  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Prompt background colour entry.</span></p>
<p><a id="sMNshift" href="#sMNreturnShift">/*  SHIFT + N  */</a> <span class="xyl3">Enter information into the note for the part. (It will go into a dataset on the part, and after saving the file, it will be accessible through that part reference in Javascript.)</span></p>
<p><a id="sMMshift" href="#sMMreturnShift">/*  SHIFT + M  */</a> <span class="xyl4">FOR THE ENTIRE COLOUR GROUP: Toggle between 'overflow: auto' and 'overflow: hidden' for the part which is currently in focus.</span></p>

<br>

<p><span class="heading3">NUMBER-PAD TUNER REFERENCES, STYLE-MODE:</span></p>


<p><a id="nTP"   href="#nTPreturn">'P' - Padding and Font-Style Tuner</a> <span class="xyl3">'/' and '*' change the left and right padding. '+' and '-' change the top and bottom padding. '7' set all to none. '8' set italic. '9' set bold. '4' set ltr. '5' set small-caps. '6' set rtl. '1' set lowercase. '2' set uppercase. '3' set capitalize. '0' and '.' change the part opacity.</span></p>
<p><a id="nTA"   href="#nTAreturn">'A' - Alignment and Spacing Tuner</a> <span class="xyl3">'7', '8', and '9' are for line height. '4', '5', and '6' are for word spacing. '1', '2', and '3' are for letter spacing. '/' and '*' will change the indentation.</span></p>
<p><a id="nTR"   href="#nTRreturn">'R' - Border-Radius/Outline Tuner</a> <span class="xyl3">'/' and '*' change the outline size. '0' and '.' change the outline style. The numbers toggle different corners. '+' and '-' change the radius size.</span></p>

<p><a id="nTF"   href="#nTFreturn">'F' - Font-Size and Text-Shadow Tuner (counter-tints)</a> <span class="xyl3">'+' and '-' will change the font size. '/' and '*' will change the blur of the text-shadow. '0' will turn the text-shadow off, while '.' will restore the text-shadow. '7', '9', '1', '3' (numpad corners) will change the corner of the text-shadow. '5' (centre) will set the shadow colour to black. '8' and '2' (up and down) will control the opacity of the shadow. '4' and '6' will cycle through an array of counter-tints.</span></p>
<p><a id="nTU"   href="#nTUreturn">'U' - Box-Shadow Tuner (counter-tints)</a> <span class="xyl3">'+' and '-' will control the shadow distance. '/' and '*' will control the shadow blur. '0' and '.' will rotate the shadow (kind of). '7', '9', '1', and '3' will set the shadow into that corner. '5' will set the shadow to black. '8' and '2' will change the shadow opacity. '4' and '6' will cycle through the counter-tint array.</span></p>

<br><br><br><br>








   
   </div>`;
   
   let helpMenuOverlay = document.createElement("div");
   helpMenuOverlay.id = "helpMenuOverlay";
   helpMenuOverlay.style.position = "absolute";
   helpMenuOverlay.style.left = "0px";
   helpMenuOverlay.style.top = "0px";
   helpMenuOverlay.style.width = "100%";
   helpMenuOverlay.style.height = "auto";
   helpMenuOverlay.id = "helpMenuOverlay";
   helpMenuOverlay.innerHTML = F1menuText;
   helpMenuOverlay.style.display = "none";
   document.body.appendChild(helpMenuOverlay);
