reorganized manifestation css

www/css/page_manifestations.css

@@ -0,0 +1,193 @@
+/* page manifestations */
+
+#middle {
+  float: left;
+  width: 600px;
+  height: auto;
+
+  #top {
+    float: left;
+    height: 25px;
+    width: 480px;
+    margin-left: 98px;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    margin-top: 50px;
+    margin-bottom: 25px;
+
+    .nom {
+      float: left;
+      height: 12px;
+      width: auto;
+      margin-right: 10px;
+
+      .carre {
+        float: left;
+        width: 10px;
+        height: 12px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  #manifestations {
+    position: relative;
+    left: 100px;
+    top: 0px;
+    float: left;
+    width: 580px;
+    height: 600px;
+
+    #Container {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 510px;
+      height: 530px;
+      background-color: #ffffff;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      padding-right: 20px;
+
+      #News {
+        position: absolute;
+        top: 0px;
+        /* overflow: hidden; */
+        width: 480px;
+        height: 530px;
+        display: block;
+
+        .Scroller-Container {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+
+          .video {
+            width: 480px;
+            height: 400px;
+            margin-top: 3px;
+
+            &.manifestation_poster {
+              position: relative;
+              background: black;
+              height: auto;
+
+              video {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+                object-position: top;
+              }
+            }
+          }
+
+          .images {
+            width: 480px;
+            height: 80px;
+            margin-top: 10px;
+
+            &.manifestation_flex {
+              display: flex;
+              justify-content: space-between;
+            }
+          }
+
+          .title {
+            width: 480px;
+            height: 20px;
+            font-family: Arial, sans-serif;
+            font-size: 19px;
+            color: #cc3300;
+            font-weight: bold;
+          }
+
+          .texte_manif {
+            width: 480px;
+            height: auto;
+            margin-bottom: 35px;
+
+            p {
+              text-align: justify;
+              font-size: 11px;
+              font-weight: normal;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.images_grand {
+  width: 480px;
+  height: 380px;
+}
+
+.images_grand1 {
+  width: 480px;
+  height: 357px;
+}
+
+.images_grand2 {
+  width: 480px;
+  height: 384px;
+}
+
+.images_grand3 {
+  width: 480px;
+  height: 351px;
+  margin-top: 3px;
+}
+
+.images_grand4 {
+  width: 480px;
+  height: 402px;
+}
+
+.images_grand5 {
+  width: 480px;
+  height: 372px;
+}
+
+.images1 {
+  width: 480px;
+  height: 80px;
+  margin-top: 0px;
+}
+
+.vignette a {
+  float: left;
+  width: 70px;
+  height: 70px;
+  border: 1px solid #ffffff;
+}
+
+.vignette a:hover {
+  float: left;
+  width: 70px;
+  height: 70px;
+  border: 1px solid #cc3300;
+}
+
+.img_grand a {
+  float: left;
+  width: 478px;
+  height: auto;
+  border: 1px solid #ffffff;
+}
+.img_grand a:hover {
+  float: left;
+  width: 478px;
+  height: auto;
+  border: 1px solid #cc3300;
+}
+
+#trait_vertical1 {
+  float: left;
+  height: 610px;
+  width: 1px;
+  margin-top: 48px;
+  margin-left: 90px;
+  border-left: 1px solid #000000;
+}