reodered pages, added chemin de fer, tranches, pages as doubles

css/dist/main.css

@@ -3,14 +3,33 @@ html, body {
   padding: 0;
   background-color: #1A1A1A; }
 
+#root {
+  height: 207.26mm;
+  margin: 0 auto;
+  position: relative;
+  width: 475.04741mm; }
+
 #header {
-  position: fixed;
-  display: none; }
+  display: absolute;
+  top: 0;
+  left: 0;
+  width: 15mm;
+  height: 100%;
+  background-color: white; }
+  #header h1 {
+    margin: 0;
+    padding: 0.3em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg); }
 
 #main {
-  height: 207.26mm;
-  width: 455.04741mm;
-  margin: 0 auto; }
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 455.04741mm; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -44,3 +63,25 @@ html, body {
         cursor: pointer; }
     #main .page.page-6 .overlay {
       background-image: url("../../images/vectos/04_chance-RB.svg"); }
+  #main #railway {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    overflow: hidden;
+    text-align: center; }
+    #main #railway ul {
+      padding: 1mm; }
+      #main #railway ul li {
+        display: inline-block;
+        vertical-align: middle;
+        background-color: white;
+        width: 1mm;
+        height: 7mm;
+        margin-left: 0.5mm;
+        background-position: center;
+        background-size: cover; }
+        #main #railway ul li.active {
+          width: 7mm; }
+        #main #railway ul li.page-right {
+          margin-right: 1mm; }