Add merged scoreboard.css

theme/scoreboard.css

@@ -5,6 +5,116 @@
   }
 }
 
+#rankings span {
+	font-size: 75%;
+	display: inline-block;
+	overflow: hidden;
+	height: 1.7em;
+}
+#rankings span.teamname {
+	font-size: inherit;
+	color: white;
+	text-shadow: 0 0 3px black;
+	opacity: 0.8;
+	position: absolute;
+	right: 0.2em;
+	background-color: #292929;
+	background-blend-mode: darken;
+	padding: 0em 0.2em;
+	border-top-left-radius: 0.5em;
+	border-bottom-left-radius: 0.5em;
+	margin:0em;
+	height: 1.5em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition-property: max-width;
+	transition-duration: 2s;
+	transition-delay: 0s;
+}
+
+#rankings span.teamname:hover {
+	max-width: 100%;
+}
+
+#rankings span.teampoints {
+	font-size:100%;
+	height:1.2em;
+	margin:0em;
+	padding:0em;
+	width:99%;
+}
+
+/* Responsive design */
+/* Defaults */
+        #rankings span.teampoints {
+                max-width:89%;
+        }
+        #rankings span.teamname {
+                max-width:10%;
+        }
+
+
+/* Monitors with large enough screens to do side by side */
+@media only screen and (min-width: 170em) {
+	#chart, #rankings {
+		width: 49%;
+		display:inline-block;
+		vertical-align:middle;
+	}
+
+}
+
+/* Monitor
+@media only screen and (max-width: 130em) {
+        #chart, #rankings {
+                width: 49%;
+                display:inline-block;
+		vertical-align: middle;
+        }
+
+	#rankings span.teampoints {
+		max-width:89%;
+	}
+	#rankings span.teamname {
+		max-width:10%;
+	}
+}
+
+/* Laptop size screen */
+@media only screen and (max-width: 100em) {
+	#rankings span.teampoints {
+		max-width:84%;
+	}
+	#rankings span.teamname {
+		max-width:15%;
+	}
+}
+
+/* Roughly Tablet size */
+@media only screen and (max-width: 70em) {
+	#rankings span.teampoints {
+		max-width:79%;
+	}
+	#rankings span.teamname {
+		max-width:20%;
+	}
+}
+
+/* Small screens phone size */
+@media only screen and (max-width: 40em) {
+	#rankings span.teampoints {
+		max-width:65%;
+	}
+	#rankings span.teamname {
+		max-width:34%;
+	}
+}
+
+
+
+
+
 #chart {
     background-color: rgba(0, 0, 0, 0.8);
 }