use CSS classes for wagonorder template (1/2)

1 files changed, 65 insertions, 0 deletions

diff --git a/public/static/css/app.css b/public/static/css/app.css
index 1565202..3e4b3bd 100644
--- a/public/static/css/app.css
+++ b/public/static/css/app.css
@@ -29,6 +29,71 @@ div.content {
 	margin: 0;
 }
 
+.wagonorder {
+	position: relative;
+	width: 100%;
+	height: 100ex;
+}
+
+.wagonorder .section {
+	position: absolute;
+	left: 1em;
+	width: 2em;
+	text-align: center;
+}
+
+.wagonorder .direction {
+	position: absolute;
+	left: 10em;
+}
+
+.wagonorder .wagon {
+	position: absolute;
+	left: 3em;
+	min-width: 6em;
+	border: 1px solid #999999;
+	padding-left: 0.2em;
+	padding-right: 0.2em;
+}
+
+.wagonorder .wagon ~ .wagon {
+	border-top: none;
+}
+
+.wagonorder .details {
+	position: absolute;
+	left: 11em;
+	right: 0em;
+}
+
+.wagonorder .details .firstclass {
+	display: inline-block;
+	width: 0.8em;
+	text-align: center;
+	color: #ffffff;
+	background-color: #666666;
+	border: 1px solid #666666;
+}
+
+.wagonorder .details .secondclass {
+	display: inline-block;
+	width: 0.8em;
+	text-align: center;
+	color: #666666;
+	border: 1px solid #666666;
+}
+
+.wagonorder .details .noclass {
+	display: inline-block;
+	width: 0.8em;
+}
+
+.wagonorder .details .type {
+	display: inline-block;
+	width: 5em;
+	color: #666666;
+}
+
 div.app {
 	border-width:1px 2px;
 	width:100%;