Add a sparkline/bar display for score history.
[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 #scorecontainer {
9         font-size: x-large;
10         margin-top: 0;
11 }
12 #score {
13         float: left;
14 }
15 #scoresparkcontainer {
16         overflow: hidden;
17 }
18 #scorespark {
19         margin-left: 0.5em;
20         margin-right: 0.5em;
21 }
22 #pvcontainer {
23         clear: left;
24 }
25 .window {
26         position: absolute;    
27         width: 0px;
28         height: 0px;
29         opacity: 0.0; 
30 }
31 .c1 {
32         opacity: 0.75;
33 }
34 .l1arrow {
35         opacity: 1.0;
36 }
37 .hidden {
38         display: none;
39 }
40 .vir path {
41         opacity: 0.0;
42 }
43 .vir path.l1arrow {
44         opacity: 1.0;
45 }
46 #news {
47         font-size: smaller;
48 }
49 #credits {
50         font-size: smaller;
51 }
52 td {
53         vertical-align: top;
54 }
55 p {
56         margin-top: 0;
57 }
58 #sortbyscoreholder {
59         font-size: smaller;
60         margin: 0;
61         font-style: italic;
62 }
63 #refutationlines {
64         font-size: smaller;
65 }
66 #refutationlines .move {
67         width: 3.5em;
68 }
69 #refutationlines .score {
70         width: 3em;
71         text-align: right;
72         padding-right: 0.5em;
73 }
74 #refutationlines .depth {
75         width: 2em;
76         text-align: right;
77         padding-right: 0.7em;
78 }
79 .white-1e1d7.nonuglyhighlight {
80         background-color: #cce5cf;
81 }
82 .black-3c85d.nonuglyhighlight {
83         background-color: #9ab6a6;
84 }
85 #boardcontainer {
86         width: 400px;
87         margin-right: 1em;
88         margin-bottom: 1em;
89         float: left;
90 }
91 #board {
92         display: block;
93         width: 100%;
94         padding: 0;
95 }
96 #hiddenboard {
97         display: none;
98 }
99 #bottompanel {
100         display: block;
101         width: 100%;
102         font-size: smaller;
103         margin-top: 0.5em;
104         margin-bottom: 0;
105 }
106 #numviewers {
107         width: auto;
108         text-align: center;
109 }
110 #whiteinfo {
111         float: left;
112         text-align: left;
113         min-width: 20%;
114 }
115 #blackinfo {
116         float: right;
117         text-align: right;
118         min-width: 20%;
119         margin-right: 5px;
120 }
121 #whiteimbalance img, #blackimbalance img {
122         vertical-align: text-top;
123 }
124 #whiteimbalance {
125         margin-left: 5px;
126 }
127 #blackimbalance {
128         margin-right: 5px;
129 }
130 .running-clock {
131         font-weight: bold;
132 }
133 #analysis {
134         display: block;
135         min-width: 400px;
136         overflow: hidden;
137 }
138
139 /* If the board is too wide for the screen, shrink it to fit,
140  * and then put the analysis below. */
141 @media all and (max-width: 400px) {
142         #boardcontainer {
143                 width: 100%;
144                 float: none;
145         }
146         #analysis {
147                 min-width: 0;
148         }
149 }
150
151 /* If there is almost space for the analysis, shrink the board a bit, too. */
152 @media all and (min-width: 500px) and (max-width: 810px) {
153         #boardcontainer {
154                 float: left;
155                 width: 50%;
156         }
157         #analysis {
158                 min-width: 0;
159         }
160 }
161 a.move {
162         color: black;
163         text-decoration: none;
164 }
165 a.move.highlight {
166         color: red;
167         font-weight: bold;
168 }
169 a.move:hover {
170         font-weight: bold;
171         text-decoration: underline;
172 }
173
174 #linenav {
175         display: none;
176 }