refactor(simbrief): navigraph and simbrief changes

* refactor(simbrief): navigraph and simbrief changes

* changes to charts.md

* make initial stable versioning for settings page

* formatting in charts.md

* add new images to repo

* add image to charts.md

* add images and finalizing documentation

* update settings.md instructions and internal links

* update simbrief.md override and stable version instructions

* Slein suggestions from code review

Co-authored-by: Sleinmaster <79196358+Sleinmaster@users.noreply.github.com>

* update 3rd party options image settings.md

* fix warning messages on build

* fix warning admonition for 3rd party options

* fix flypad-settings-third-party-options.png width

* fix title in navigation

---------

Co-authored-by: Sleinmaster <79196358+Sleinmaster@users.noreply.github.com>

Author: Valastiri

docs/fbw-a32nx/assets/flypados3/flypad-settings-third-party-options.png

@@ -23,22 +23,39 @@ With a valid Navigraph subscription, the FlyByWire flyPad allows access to all N
 
 ### Authentication to Navigraph
 
-Before you can use the Navigraph integration, the flyPad will ask you once to authenticate and authorize Navigraph access by either scanning the QR code or visiting the shown URL in a browser. Login in there and authorize FlyByWire to access the Navigraph account.
+Before you can use the Navigraph integration, the flyPad will ask you to authenticate and authorize Navigraph once.
 
-<div style="position: relative;">
-    <img src="/fbw-a32nx/assets/flypados3/charts-navigraph-login.png" style="width: 100%; height: auto;" loading="lazy">
-    <a href="../dashboard/">   <div class="imagemap" style="position: absolute; left: 1.7%; top:  6.9%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Dashboard</span></div></a>
-    <a href="../dispatch/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 14.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Dispatch</span></div></a>
-    <a href="../ground/">      <div class="imagemap" style="position: absolute; left: 1.7%; top: 21.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Ground</span></div></a>
-    <a href="../performance/"> <div class="imagemap" style="position: absolute; left: 1.7%; top: 28.3%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Performance</span></div></a>
-    <a href="../charts/">      <div class="imagemap" style="position: absolute; left: 1.7%; top: 35.6%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Navigation & Charts</span></div></a>
-    <a href="../online-atc/">  <div class="imagemap" style="position: absolute; left: 1.7%; top: 43.0%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Online ATC</span></div></a>
-    <a href="../failures/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 50.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Failures</span></div></a>
-    <a href="../checklists/">  <div class="imagemap" style="position: absolute; left: 1.7%; top: 57.3%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Checklists</span></div></a>
-    <a href="../presets/">     <div class="imagemap" style="position: absolute; left: 1.7%; top: 64.7%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Presets</span></div></a>
-    <a href="../settings/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 85.0%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Settings</span></div></a>
-    <span class="imagesub">Click on the menu icons in this image to see other flyPad pages.</span>
-</div>
+You will be redirected to (*Settings Page -> 3rd Party Options*) where you can link your account.
+
+For more information see [SimBrief and Navigraph Integration](../simbrief.md#setup-a32nx-simbrief-integration).
+
+[//]: # (<div style="position: relative;">)
+
+[//]: # (    <img src="/fbw-a32nx/assets/flypados3/charts-navigraph-login.png" style="width: 100%; height: auto;" loading="lazy">)
+
+[//]: # (    <a href="../dashboard/">   <div class="imagemap" style="position: absolute; left: 1.7%; top:  6.9%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Dashboard</span></div></a>)
+
+[//]: # (    <a href="../dispatch/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 14.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Dispatch</span></div></a>)
+
+[//]: # (    <a href="../ground/">      <div class="imagemap" style="position: absolute; left: 1.7%; top: 21.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Ground</span></div></a>)
+
+[//]: # (    <a href="../performance/"> <div class="imagemap" style="position: absolute; left: 1.7%; top: 28.3%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Performance</span></div></a>)
+
+[//]: # (    <a href="../charts/">      <div class="imagemap" style="position: absolute; left: 1.7%; top: 35.6%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Navigation & Charts</span></div></a>)
+
+[//]: # (    <a href="../online-atc/">  <div class="imagemap" style="position: absolute; left: 1.7%; top: 43.0%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Online ATC</span></div></a>)
+
+[//]: # (    <a href="../failures/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 50.1%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Failures</span></div></a>)
+
+[//]: # (    <a href="../checklists/">  <div class="imagemap" style="position: absolute; left: 1.7%; top: 57.3%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Checklists</span></div></a>)
+
+[//]: # (    <a href="../presets/">     <div class="imagemap" style="position: absolute; left: 1.7%; top: 64.7%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Presets</span></div></a>)
+
+[//]: # (    <a href="../settings/">    <div class="imagemap" style="position: absolute; left: 1.7%; top: 85.0%; width: 5.8%; height: 7.0%;"><span class="imagemapname">Settings</span></div></a>)
+
+[//]: # (    <span class="imagesub">Click on the menu icons in this image to see other flyPad pages.</span>)
+
+[//]: # (</div>)
 
 ### Map Controls
 

docs/fbw-a32nx/assets/flypados3/navigraph/flypad-ng-3rdpartyoptions-blank.png

@@ -237,6 +237,8 @@ Settings for integrations with various 3rd party applications
 [//]: # (!!! warning "")
 
 [//]: # (    This feature is only available in the [Development Version](../../fbw-versions.md#development-version-recommended))
+!!! warning "Navigraph Options"
+    This feature is only available in the [Development Version](../../fbw-versions.md#development-version-recommended)
 
 #### GSX Integration
 These options are separate to provide you with the flexibility to choose what to sync with GSX and what not to sync. 
@@ -298,31 +300,18 @@ Settings for integration with various data and information sources.
 
         ![flypad-settings-atsu-aoc-telex-warning](../../assets/flypados3/flypad-settings-atsu-aoc-telex-warning.png)
 
-- SimBrief Username/Pilot ID
+- SimBrief Username/Pilot ID (**Stable Version Only**)
     - See [next chapter](#simbrief-integration)
 - Hoppie User ID:
     - Unique logon code that is used to identify the user for the Hoppie ACARS communication.
     - See [Create a logon code](../hoppie.md#create-a-logon-code) in our documentation for Hoppie ACARS.
 
 ### SimBrief Integration
 
-Before you can use the A32NX simBrief Integration, you need to provide your simBrief account details.
-
-!!! tip "Locating the SimBrief EFB Settings"
-    If you have arrived at this section from the [SimBrief Integration](../simbrief.md) page, please make note this setting is found on the EFB, under Settings -> ATSU/AOC.
-
-- SimBrief Pilot ID:
-    - Enter your SimBrief Pilot ID.
-
-      ![simBrief Account field](../../assets/flypados3/simbrief-account-field.png "simBrief Account field")
-
-    - If you entered a wrong Pilot ID, a red error message will be displayed.
-
-      ![simBrief Account Field Error](../../assets/flypados3/simbrief-account-field-error.png "simBrief Account Field Error")
-
-To get your simBrief Pilot ID, you can go to your simBrief Account settings and open "SimBrief Data".
+!!! warning ""
+    This setting only applies to the Stable Version of the A32NX. See the page listed below.
 
-![simBrief Account Data](../../assets/flypados3/simbrief-account-data.png "simBrief Account Data")
+Please see our [SimBrief and Navigraph Integration](../simbrief.md) page for details on linking your accounts for both Stable and Development Versions.
 
 ## Audio
 

docs/fbw-a32nx/assets/flypados3/navigraph/flypad-ng-3rdpartyoptions.png

@@ -1,4 +1,27 @@
-# SimBrief Integration
+---
+title: SimBrief Integration
+---
+
+<link rel="stylesheet" href="../../../stylesheets/toc-tables.css">
+
+# SimBrief and Navigraph Integration
+
+Please use the Quick Links to jump to any relevant section. For connecting your SimBrief/Navigraph Accounts, click the relevant button below.
+
+[Development Version - Link Navigraph/SimBrief](#setup-a32nx-simbrief-integration){.md-button}
+
+[Stable Version - Link Navigraph/SimBrief](#stable-version-only){.md-button}
+
+## Quick Links
+
+|                                          Quick Links                                          |
+|:---------------------------------------------------------------------------------------------:|
+|                              [Flight Planning](#flight-planning)                              |
+|                            [SimBrief Airframe](#simbrief-airframe)                            |
+|             [Setup A32NX SimBrief Integration](#setup-a32nx-simbrief-integration)             |
+|          [Using flyPad SimBrief Integration](#using-the-flypad-simbrief-integration)          |
+| [Using the FMS (MCDU) and SimBrief Integration](#using-the-fms-mcdu-and-simbrief-integration) |
+
 
 ## Flight Planning
 
@@ -24,7 +47,59 @@ This airframe will be updated by FlyByWire Simulations when needed, so you will
 
 ## Setup A32NX SimBrief Integration
 
-The SimBrief username needs to be configured in the flyPad EFB. See [Setup SimBrief Integration](flypados3/settings.md#simbrief-integration)
+!!! info "This integration does not require having an active Navigraph subscription."
+
+Your Navigraph account needs to be configured in the flyPad EFB.
+
+You can do this by navigating to the following page on the flyPad (EFB):
+
+1. Settings Page
+- 3rd Party Options
+- Select the "Link Account" button next to Navigraph Account Link
+
+![flypad-ng-3rdpartyoptions-blank.png](../assets/flypados3/navigraph/flypad-ng-3rdpartyoptions-blank.png){loading=lazy}
+
+You will be presented with the following screen:
+
+![flypad-ng-auth.png](../assets/flypados3/navigraph/flypad-ng-auth.png){loading=lazy}
+
+Follow the instructions above to link your account.
+
+If successful, you should see your account name followed by your Navigraph account subscription status (not required) and an option to Unlink Account. As seen below:
+
+![flypad-ng-3rdpartyoptions.png](../assets/flypados3/navigraph/flypad-ng-3rdpartyoptions.png){loading=lazy}
+
+!!! note "Overriding SimBrief User ID"
+    There may be situations where you would like to import data from SimBrief not specifically linked to your account, i.e., copying a streamer's or friend's flight plan to your 
+    aircraft or using an add-on for shared cockpit scenarios.
+
+    In this case you can override the SimBrief User ID by entering it in the SimBrief User ID field. This will override the linked Navigraph account temporarily until it 
+    is removed. You will be notified when the override is succesful with a pop up message. Example below:
+
+    ![flypad-ng-override.png](../assets/flypados3/navigraph/flypad-ng-override.png){loading=lazy}
+
+If you are still unsure of where the Settings page on the EFB is, please see [flyPad Settings](flypados3/settings.md).
+
+??? warning "Stable Version Only"
+    ### Stable Version Only    
+
+    The SimBrief username needs to be configured in the flyPad EFB under Settings -> ATSU/AOC. [Location Here](flypados3/settings.md##atsuaoc).
+
+    Before you can use the A32NX simBrief Integration, you need to provide your simBrief account details.
+    
+    - SimBrief Pilot ID:
+
+        - Enter your SimBrief Pilot ID into the applicable field
+    
+          ![simBrief Account field](../assets/flypados3/simbrief-account-field.png "simBrief Account field")
+    
+        - If you entered a wrong Pilot ID, a red error message will be displayed.
+    
+          ![simBrief Account Field Error](../assets/flypados3/simbrief-account-field-error.png "simBrief Account Field Error")
+    
+    To get your simBrief Pilot ID, you can go to your simBrief Account settings and open "SimBrief Data".
+    
+    ![simBrief Account Data](../assets/flypados3/simbrief-account-data.png "simBrief Account Data")
 
 ## Using the flyPad SimBrief Integration