+
+/* 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) {
+ #boardcontainer {
+ 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) {
+ #boardcontainer {
+ float: left;
+ width: 50%;
+ }
+ #analysis {
+ min-width: 0;
+ }
+}
+a.move {
+ color: black;
+ text-decoration: none;
+}
+a.move.highlight {
+ color: red;
+ font-weight: bold;
+}
+a.move:hover {
+ font-weight: bold;
+ text-decoration: underline;
+}
+
+#linenav {
+ display: none;
+}
+
+/* Opening display */
+.num {
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ text-align: right;
+}
+.winbars {
+ width: 20em;
+ font-size: small;
+ font-weight: bold;
+ text-align: center;
+}
+.winbars table {
+ border: 1px solid black;
+ width: 100%;
+ border-collapse: collapse;
+}
+.winbars table td {
+ border: 1px solid black;
+ overflow: hidden;
+ max-width: 0px;
+}
+.winbars table td.white {
+ background-color: white;
+ color: black;
+}
+.winbars table td.draw {
+ background-color: gray;
+ color: white;
+}
+.winbars table td.black {
+ background-color: black;
+ color: white;
+}
+.totals {
+ background: rgb(90%,90%,90%);
+}
+.transponly {
+ background: rgb(90%,90%,100%);
+}