try to center logos

res/scoreboard.css

@@ -1,6 +1,3 @@
-/* IE can't handle key events anyway, so screw it,
-   we're just keeping one copy around. */
-
 @font-face {
     font-family: 'ComunicacionDigitalMedium';
     src: url('comunicacion-webfont.ttf') format('truetype');
@@ -42,18 +39,23 @@ body {
     user-select: none;
 }
 
-#logo-a, #logo-b {
+#logo-a-container, #logo-b-container {
     position: absolute;
     top: 0;
-    max-width: 1.8em;
-    max-height: 2em;
+    height: 5em;
+    width: 2em;
+    text-align: center;
 }
-#logo-a {
+#logo-a-container {
     left: 0;
 }
-#logo-b {
+#logo-b-container {
     right: 0;
 }
+#logo-a, #logo-b {
+    max-width: 1.8em;
+    max-height: 2em;
+}
 
 #timeouts-a, #timeouts-b {
     position: absolute;

scoreboard.html

@@ -31,7 +31,7 @@
         -->
         <div id="scoreboard">
             <p>
-                <img src="" alt="A" id="logo-a" onclick="handle(event);">
+                <span id="logo-a-container"><img src="" alt="A" id="logo-a" onclick="handle(event);"></span>
                 <span id="timeouts-a" onclick="handle(event);">0</span>
                 <span id="jammer-a" onclick="handle(event);">★</span>
                 <span id="score-a" onclick="handle(event);">-</span>
@@ -46,7 +46,7 @@
             </p>
 
             <p>
-                <img src="" alt="B" id="logo-b" onclick="handle(event);">
+                <span id="logo-b-container"><img src="" alt="B" id="logo-b" onclick="handle(event);"></span>
                 <span id="timeouts-b" onclick="handle(event);">0</span>
                 <span id="jammer-b" onclick="handle(event);">★</span>
                 <span id="score-b" onclick="handle(event);">-</span>