Do various tweaks to work better on mobile devices.
[remoteglot] / www / css / remoteglot.css
1 body {
2         font-family: sans-serif;
3 }
4 h3 {
5         margin-top: 1em;
6         margin-bottom: 0;
7 }
8 .window {
9         position: absolute;    
10         width: 0px;
11         height: 0px;
12         opacity: 0.0; 
13 }
14 .c1 {
15         opacity: 0.75;
16 }
17 .l1arrow {
18         opacity: 1.0;
19 }
20 .hidden {
21         display: none;
22 }
23 .vir path {
24         opacity: 0.0;
25 }
26 .vir path.l1arrow {
27         opacity: 1.0;
28 }
29 #credits {
30         font-size: smaller;
31 }
32 td {
33         vertical-align: top;
34 }
35 p {
36         margin-top: 0;
37 }
38 #refutationlines {
39         font-size: smaller;
40 }
41 #refutationlines .move {
42         width: 3.5em;
43 }
44 #refutationlines .score {
45         width: 3em;
46         text-align: right;
47         padding-right: 0.5em;
48 }
49 #refutationlines .depth {
50         width: 2em;
51         text-align: right;
52         padding-right: 0.7em;
53 }
54 .white-1e1d7.nonuglyhighlight {
55         background-color: #cce5cf;
56 }
57 .black-3c85d.nonuglyhighlight {
58         background-color: #9ab6a6;
59 }
60 #board {
61         display: block;
62         float: left;
63         width: 400px;
64         margin-right: 1em;
65         margin-bottom: 1em;
66         padding: 0;
67 }
68 #analysis {
69         display: block;
70         min-width: 400px;
71         overflow: hidden;
72 }
73
74 /* If the board is too wide for the screen, shrink it to fit,
75  * and then put the analysis below. */
76 @media all and (max-width: 400px) {
77         #board {
78                 width: 100%;
79                 float: none;
80         }
81         #analysis {
82                 min-width: 0;
83         }
84 }
85
86 /* If there is almost space for the analysis, shrink the board a bit, too. */
87 @media all and (min-width: 500px) and (max-width: 810px) {
88         #board {
89                 float: left;
90                 width: 50%;
91         }
92         #analysis {
93                 min-width: 0;
94         }
95 }