body {
font-family: sans-serif;
}
+h3 {
+ margin-top: 1em;
+ margin-bottom: 0;
+}
+#score {
+ font-size: x-large;
+}
.window {
position: absolute;
width: 0px;
.black-3c85d.nonuglyhighlight {
background-color: #9ab6a6;
}
+#board {
+ display: block;
+ float: left;
+ width: 400px;
+ margin-right: 1em;
+ margin-bottom: 1em;
+ padding: 0;
+}
+#analysis {
+ display: block;
+ min-width: 400px;
+ overflow: hidden;
+}
+
+/* If the board is too wide for the screen, shrink it to fit,
+ * and then put the analysis below. */
+@media all and (max-width: 400px) {
+ #board {
+ width: 100%;
+ float: none;
+ }
+ #analysis {
+ min-width: 0;
+ }
+}
+
+/* If there is almost space for the analysis, shrink the board a bit, too. */
+@media all and (min-width: 500px) and (max-width: 810px) {
+ #board {
+ float: left;
+ width: 50%;
+ }
+ #analysis {
+ min-width: 0;
+ }
+}