timeline.css

static/timeline.css

@@ -1,3 +1,91 @@
-body { background: red;
+.mw-parser-output{
-       color: white;
+	position: left top;
+	display: hidden;
 }
+
+
+.content {
+	border-style: solid 1px black;
+	transform: rotate(90deg);
+	transform-origin: right top;
+	background-color: red;
+	color: #444;
+	cursor: pointer;
+	padding: 5px;
+	position: fixed;
+	font-size: 15px;
+    z-index: +1;
+    font-family: Times New Roman;
+}
+
+.horizontal-scroll-wrapper {
+	display: inline-table;
+	margin-top: 10vw;
+	width: 20vw;
+	height: 80vw;
+	overflow-y: auto;
+	overflow-x: hidden; 
+	transform: rotate(-90deg) /*translateY(-100px)*/;
+	transform-origin: right top;
+
+}
+
+.event {
+	text-align-last: auto;
+    height: 10vw;
+	transform: rotate(90deg);
+	transform-origin: right top;
+	font-family: Arial;
+	font-size: 10px;
+	padding-top: 5vw;
+	padding-left: 5vw;
+}
+
+.thumbborder {
+/*	display: none;*/
+	width: 20%;
+	height: auto;
+}
+
+.thumbborder:hover {
+	width:100%; 
+	transition:0.5s;
+	height: auto;
+}
+
+.bar-chart {
+display: table;
+margin-top: 20px;
+}
+
+.row {
+display: table-row;
+}
+
+.row div {
+display: table-cell;
+width: 60px;
+height: 44px;
+border-right: 2px solid rgb(255, 255, 255);
+}
+
+.row .axis-y {
+width: 96px;
+border-right: 1px solid #000;
+vertical-align: top;
+}
+
+.axis-x div {
+border-top: 1px solid #000;
+}
+
+.axis-x .axis-y {
+border: none;
+}
+
+.axis-x div, .axis-y {
+text-align: center;
+font-weight: bold;
+}
+
+