Applied Xonotic HTML/CSS/JS theme and worked existing HTML/CSS
[xonotic/xonstat.git] / xonstat / static / css / style.css
1 /*  html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com  Twitter: @rich_clark */  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }  body { line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  display:block; }  nav ul { list-style:none; }  blockquote, q { quotes:none; }  blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }  a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }  /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; }  /* change colours to suit your needs */ mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }  del { text-decoration: line-through; }  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }  table { border-collapse:collapse; border-spacing:0; }  /* change border colour to suit your needs */ hr { display:block; height:1px; border:0;  border-top:1px solid #888; margin:1em 0; padding:0; }  input, select { vertical-align:middle; }
2
3 @font-face {
4     font-family: 'Xolonium';
5     src: url('fonts/xolonium-webfont.eot');
6     src: url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),
7          url('fonts/xolonium-webfont.woff') format('woff'),
8          url('fonts/xolonium-webfont.ttf') format('truetype'),
9          url('fonts/xolonium-webfont.svg#Xolonium') format('svg');
10     font-weight: normal;
11     font-style: normal;
12 }
13
14 body {
15         width:100%;
16         background:#000 url('img/web_background.png') 0 0 no-repeat;
17         background-size: 100%;
18     font-family: 'Xolonium', 'Arial', 'Helvetica';
19     font-size: 14px;
20     line-height:1.4em;
21         color:#C7E3FF;
22         overflow-x:hidden;
23 }
24 h1 {
25         font-size:20px;
26         text-align: center;
27 }
28
29 h2 {
30         font-size:18px;
31         color:#D0E8FF;
32         margin:15px 0 12px;
33 }
34 h3 {
35         font-size:16px;
36         color:#FF7000;
37         margin:18px 0 4px;
38 }
39 h4 {
40         font-size:15px;
41         color:#6D8399;
42         margin:18px 0 4px;
43 }
44 h5 {
45         color:#BD5300;
46         margin:8px 0 4px;
47 }
48 p {
49         margin:8px 0;
50         line-height:18px;
51 }
52 a {
53         color:#DCE9F5;
54         text-decoration:none;
55 }
56 a:hover {
57         color:#D95F00;
58 }
59 th {
60         font-size:13px;
61         padding:2px;
62         border:1px solid #436688;
63         background-color:#001021;
64         cursor:pointer;
65 }
66 th:hover {
67         color:#fff;
68         text-shadow:1px 1px 3px #5A8BBC !important;
69 }
70 td {
71         border:1px solid #436688;
72         font-size:10px;
73         padding:4px;
74 }
75 blockquote {
76         font-size:14px;
77         color:#fff;
78         margin:12px 15px;
79         line-height:22px;
80         padding:10px;
81         border:1px solid #6D8399;
82         border-left:3px solid #B5DAFF;
83         background-color: rgba(105,105,105,0.1);
84 }
85 code {
86         display:block;
87         border:1px solid #999;
88         padding:10px;
89         margin:12px 15px;
90         white-space: pre;
91 }
92 table { width:100%; }
93 input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
94 /* helpers */
95 .clearfix:after {
96     content: ".";
97     display: block;
98     height: 0;
99     clear: both;
100     visibility: hidden;
101 }
102
103 /* layout */
104 #container {
105         position:relative;
106         width:1052px;
107         background: transparent url('img/web_background_l2.png') no-repeat center top;
108         margin:0 auto;
109         padding-top:244px;
110 }
111 #content {
112         position:relative;
113         top:-20px;
114         /*min-width:512px;
115         max-width:986px;
116         width:auto;*/
117         width:950px;
118         padding-bottom:20px;
119 }
120 #title {
121         position:relative;
122         text-align:center;
123         height:25px;
124         line-height:25px;
125         top:-44px;
126         color:#DCE9F5;
127 }
128 .window {
129         border-width: 56px 56px 56px;
130         -moz-border-image: url(img/web_border.png) 85 85 85 stretch;
131         -webkit-border-image: url(img/web_border.png) 72 85 85 stretch;
132         -o-border-image: url(img/web_border.png) 96 96 96 stretch;
133         border-image: url(img/web_border.png) 96 96 96 stretch;
134 }
135 #main {
136         position:relative;
137         width:610px;
138 }
139 #sidebar {
140         width: 320px;
141         margin-right:5px;
142 }
143 #main.left, #sidebar.left {
144         float:left;
145 }
146 #main.right, #sidebar.right {
147         float:right;
148 }
149 #footer{
150     clear: both;
151     text-align: center;
152 }
153
154 /* Main Menu */
155 #menu {
156         top: -33px;
157         left: -19px;
158         width:986px;
159         list-style:none;
160         border:1px solid #AED5FE;
161         border-top:0;
162         -moz-border-radius: 0 0 4px 4px;
163         -webkit-border-radius: 0 0 4px 4px;
164         border-radius: 0 0 4px 4px;
165 }
166 #menu li {
167         display:inline;
168 }
169 #menu li a {
170         width:145px;
171         height:32px;
172         line-height:32px;
173         vertical-align:middle;
174         color:#AED5FE;
175         text-align:center;
176 }
177
178 /* drop-down navigation */
179 .nav, .nav ul { 
180         list-style: none;
181         margin: 0;
182         padding: 0;
183 }
184  
185 .nav {
186   z-index: 100;
187   position: relative;
188 }
189 .nav li {
190   border-right: 1px solid #AED5FE;
191   float: left;
192   margin: 0;
193   padding: 0;
194   position: relative;
195 }
196 .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
197   display: block;
198   padding: 0;
199   text-decoration:none;
200 }
201  
202 .nav li a:hover {
203         background-color:#111 !important;
204         color:#fff !important;
205         text-shadow:1px 1px 3px #5A8BBC !important;
206 }
207  
208 .nav ul {
209   border-bottom: 1px solid #000;
210   list-style: none;
211   margin: 0;
212   min-width:164px;
213   position: absolute;
214   top: -999em;
215 }
216 .nav li:hover ul,
217 .nav li.sfHover ul {
218   top: 32px;
219   z-index:1000;
220 }
221 .nav ul li {
222   border:0;
223   float: none;
224 }
225 .nav ul a {
226   width: 145px;
227   white-space: nowrap;
228   border-bottom:1px solid #AED5FE;
229 }
230 .nav ul a:hover {
231         background-color:#111 !important;
232         color:#fff !important;
233 }
234 .nav li.last {
235         border-right:1px solid #AED5FE !important;
236 }
237 .nav2 {
238         border:1px solid #AED5FE;
239         left:-1px;
240 }
241 .nav2 li a {
242         background-color:#000;
243         width:164px !important;
244 }
245
246
247 /* UI widgets */
248 .button {
249         display:inline-block;
250         background: url(img/temp/button_sprite.png) no-repeat -128px 0;
251         height:32px;
252         width:190px;
253         line-height:24px;
254         text-align:center;
255         color:#ccc;
256         text-decoration:none;
257         border:0;
258         padding:0;
259         cursor:pointer;
260 }
261 a.button {
262         height:24px;
263         width:160px;
264         line-height:24px;
265         padding:4px 16px;
266 }
267 .button.s { background-position:0 0; width:126px; }
268 .button.m { background-position:-320px 0; width:318px; }
269 .button.l { background-position:-640px 0; width:638px; }
270 a.button.s { width:96px; }
271 a.button.m { width:288px; }
272 a.button.l { width:608px; }
273
274 .button.s:hover { background-position:0 -33px; }
275 .button:hover { background-position:-128px -33px; }
276 .button.m:hover { background-position:-320px -33px; }
277 .button.l:hover { background-position:-640px -33px; }
278
279 .button.s:active, .button.s:focus  { background-position:0 -66px; }
280 .button:active, .button:focus { background-position:-128px -66px; }
281 .button.m:active, .button.m:focus { background-position:-320px -66px; }
282 .button.l:active, .button.l:focus { background-position:-640px -66px; }
283
284 .button:hover, .button:active, .button:focus {
285         outline:0;
286 }
287
288 input[type=text], .textbox {
289         display:inline-block;
290         background: url(img/inputbox_sprite.png) no-repeat -128px 0;
291         width:150px;
292         height:24px;
293         line-height:24px;
294         text-align:left;
295         color:#ccc;
296         text-decoration:none;
297         padding:4px 16px;
298         border:0;
299 }
300
301 .textbox.s { background-position: 0 0; width:96px; }
302 .textbox.m { background-position:-320px 0; width:288px; }
303 .textbox.l { background-position:-640px 0; width:608px; }
304
305 .textbox.s:hover { background-position:0 -32px; }
306 input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
307 .textbox.m:hover { background-position:-320px -32px; }
308 .textbox.l:hover { background-position:-640px -32px; }
309
310 .textbox:hover, .textbox:active, .textbox:focus, input[type=text] {
311         outline:none;
312 }
313
314 .checkbox, .radio {
315         display: none;
316 }
317 .checkbox-label {
318         background: url('img/web_checkbox_n0.png') no-repeat;
319         padding-left: 40px;
320         padding-top: 3px;
321         margin: 5px;
322         height: 32px;   
323         display: inline-block;
324         cursor:pointer;
325 }
326 .checkbox-label:hover, .radio-label:hover{
327         text-decoration: underline;
328 }
329 .checkbox-selected, .radio-selected {
330         background: url('img/web_checkbox_n1.png') no-repeat;
331 }
332 .radio-label {
333         background: url("img/web_radiobutton_n0.png") no-repeat;
334         padding-left: 60px;
335         padding-top: 3px;
336         margin: 5px;
337         height: 64px;   
338         width: 64px;
339         display: block; 
340         float: left;
341         cursor:pointer;
342 }
343 .radio-selected {
344         background: url("img/web_radiobutton_n1.png") no-repeat;
345 }
346
347 /* Content Specific */
348 #top-players, #top-servers, #top-maps {
349     float: left;
350     margin-bottom: 10px;
351     width:100%;
352 }
353
354 #recent-games {
355     width: 610px;
356 }
357 #recent-games_filter {
358         position: absolute;
359         top: -38px;
360         right: 0;
361 }
362
363 thead.red {
364         color:#D31D12;
365         background-color:#170403;
366 }
367 tr.odd.red {
368         background-color:#571612;
369 }
370 tr.even.red {
371         background-color:#571612;
372 }
373 thead.blue {
374         color:#2F53F7;
375         background-color:#04081A;
376         border-color:#101940 !important;
377 }
378 tr.odd.blue {
379         background-color:#000F4C;
380 }
381 tr.even.blue {
382         background-color:#571612;
383 }
384 .game {
385         background-color:#0a0a0a;
386         background-image: -webkit-gradient(
387                 linear,
388                 left bottom,
389                 left top,
390                 color-stop(0.67, #101114),
391                 color-stop(0.51, #000A15)
392         );
393         background-image: -moz-linear-gradient(
394                 center bottom,
395                 #111 67%,
396                 #000A15 51%
397         );
398         border:1px solid #373B45;
399         margin-bottom:10px;
400         padding:3px;
401 }
402 .game h3 {
403         color:#93B1CF;
404         padding:4px 4px 8px;
405         margin:0;
406 }
407 .game h3 a {
408         color:#C5DCF3;
409 }
410 .game h3 a:hover {
411         color:#fff;
412 }
413 .permalink {
414         float:right;
415         font-size:12px;
416 }
417 .permalink a {
418         color:#666 !important;
419 }
420 .permalink a:hover {
421         color:#999 !important;
422         text-decoration:underline;
423 }