Extracted css into separate files

TODO_README.md

@@ -1,13 +1,12 @@
 # How
 
-- avoid screenshots for now - use placeholders instead   
+- avoid screenshots for now - use placeholders instead (exception is flight-deck overview)   
   - text, dummy-image or similar A32NX images
 - do not add notes to features if available or not. These will still change a lot and we will do it 
   shortly before release
 - otherwise use the A32NX docs as a guide for the content - if you think you can improve on the pages 
   in the A32NX docs, feel free to do so for the A380X docs. But we recommend to not make your life 
   unnecessarily difficult
-
 
 # TODO
 

docs/pilots-corner/a380x/a380x-briefing/flight-deck/index.md

@@ -15,41 +15,7 @@ description: The A380 Flight Deck Overview is providing an interactive graphical
 - Move the mouse over the panels to get the name of the panel.
 - Click on the panels to get a more detailed description of that panel.
 
-<style>
-.imagemap {
-    position: relative;
-    display: inline-block;
-    /*background-color: rgba(255, 0, 0, .4); */
-    /*border: 1px solid yellow; */
-    background-color: rgba(10, 144, 153, 0.30);
-    border: 1px solid black;
-}
-.imagemap .imagemapname {
-  /*visibility: hidden;*/
-
-  font-size: 1.5em;
-  background-color: rgba(29, 30, 38,.8);
-  color: rgba(212, 212, 213, 1);
-  text-align: center;
-  padding: 5px 5px;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 1;
-  width: 8em;
-  top: 30%;
-  left: 50%;
-  margin-left: -4em; /* Use half of the width (120/2 = 60), to center the tooltip */
-}
-.imagemap:hover .imagemapname {
-    visibility: visible;
-}
-.imagemap:hover {
-    background-color: rgba(10, 144, 153, 0.40);
-    border: 3px solid black;
-}
-</style>
+<link href="/stylesheets/a380x-flight-deck-1.css" rel="stylesheet">
 
 <div style="position: relative;">
     <img src="/pilots-corner/a380x/assets/a380x-briefing/flight-deck/cockpit_full.png" class="skip-lightbox" style="width: 100%; height: auto;">

docs/pilots-corner/a380x/a380x-briefing/flight-deck/overviews/ovhd.md

@@ -11,38 +11,7 @@ description: The A380 Flight Deck Overhead Panel is providing an interactive gra
 
 [Back to A380 Flight Deck Overview](../index.md){ .md-button }
 
-<style>
-.imagemap {
-    position: relative;
-    display: inline-block;
-     /*background-color: rgba(255, 0, 0, .4); */
-     /*border: 1px solid yellow; */
-}
-.imagemap .imagemapname {
-  visibility: hidden;
-
-  background-color: rgba(29, 30, 38,.8);
-  color: rgba(212, 212, 213, 1);
-  text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 1;
-  width: 160px;
-  top: 5%;
-  left: 50%;
-  margin-left: -80px; /* Use half of the width (120/2 = 60), to center the tooltip */
-}
-.imagemap:hover .imagemapname {
-    visibility: visible;
-}
-.imagemap:hover {
-    background-color: rgba(10, 144, 153, 0.30);
-    border: 1px solid black;
-}
-</style>
+<link href="/stylesheets/a380x-flight-deck-1.css" rel="stylesheet">
 
 <div style="position: relative;">
     <img src="/pilots-corner/a380x/assets/a380x-briefing/flight-deck/overhead.png" class="skip-lightbox" style="width: 100%; height: auto;">

docs/stylesheets/a380x-flight-deck-1.css

@@ -0,0 +1,31 @@
+/* This is the css for the full cockpit overview page of the A380X Flight-Deck */
+
+.imagemap {
+    position: relative;
+    display: inline-block;
+    /* this is for arranging the boxes - enable if required */
+    /*background-color: rgba(255, 0, 0, .4); */
+    /*border: 1px solid yellow; */
+    background-color: rgba(10, 144, 153, 0.30);
+    border: 1px solid black;
+}
+.imagemap .imagemapname {
+    font-size: 1.5em;
+    background-color: rgba(29, 30, 38,.8);
+    color: rgba(212, 212, 213, 1);
+    text-align: center;
+    padding: 5px 5px;
+    border-radius: 6px;
+
+    /* Position the tooltip text - see examples below! */
+    position: absolute;
+    z-index: 1;
+    width: 8em;
+    top: 30%;
+    left: 50%;
+    margin-left: -4em; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+.imagemap:hover {
+    background-color: rgba(10, 144, 153, 0.40);
+    border: 3px solid black;
+}

docs/stylesheets/a380x-flight-deck-2.css

@@ -0,0 +1,33 @@
+/* This is the css for the overview page of the A380X Flight-Deck */
+
+.imagemap {
+    position: relative;
+    display: inline-block;
+    /* this is for arranging the boxes - enable if required
+    /*background-color: rgba(255, 0, 0, .4); */
+    /*border: 1px solid yellow; */
+}
+.imagemap .imagemapname {
+    visibility: hidden; /* disable this for arranging boxes */
+
+    background-color: rgba(29, 30, 38,.8);
+    color: rgba(212, 212, 213, 1);
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    /* Position the tooltip text - see examples below! */
+    position: absolute;
+    z-index: 1;
+    width: 160px;
+    top: 5%;
+    left: 50%;
+    margin-left: -80px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+.imagemap:hover .imagemapname {
+    visibility: visible;
+}
+.imagemap:hover {
+    background-color: rgba(10, 144, 153, 0.30);
+    border: 1px solid black;
+}