]> de.git.xonotic.org Git - xonotic/xonstat.git/blob - xonstat/static/css/style.css
Get rid of "git build" from the header image. It is a carryover from the original...
[xonotic/xonstat.git] / xonstat / static / css / style.css
1 /* Author: Tyler "-z-" Mulligan
2  * Notes: Graphics paritially generated from a Xonotic game theme with
3  * the idea of future support for other game skins to be generated and
4  * supported by this framework.
5  * Reset by Richard Clark @ html5doctor.com, v1.6.1
6  * Last Updated: 2011-06-29
7  */  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:#C59240; color:#000; text-decoration:none; }  /* change colours to suit your needs */ mark { background-color:#B58224; 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; }
8
9 @font-face {
10     font-family: 'Xolonium';
11     src: url('fonts/xolonium-webfont.eot');
12     src: url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),
13          url('fonts/xolonium-webfont.woff') format('woff'),
14          url('fonts/xolonium-webfont.ttf') format('truetype'),
15          url('fonts/xolonium-webfont.svg#Xolonium') format('svg');
16     font-weight: normal;
17     font-style: normal;
18 }
19
20 body {
21         width:100%;
22         background:#000 url('img/web_background.png') 0 0 no-repeat;
23         background-size: 100%;
24     font-family: 'Xolonium', 'Arial', 'Helvetica';
25     font-size: 14px;
26     line-height:1.4em;
27         color:#C7E3FF;
28         overflow-x:hidden;
29 }
30 h1 {
31         font-size:20px;
32         text-align: center;
33 }
34
35 h2 {
36         font-size:18px;
37         color:#D0E8FF;
38         text-shadow:1px 1px 4px #013;
39         margin:15px 0 12px;
40 }
41 h3 {
42         font-size:16px;
43         /*color:#FF7000;*/
44         color:#ADC0D2;
45         margin:18px 0 4px;
46 }
47 h4 {
48         font-size:15px;
49         color:#6D8399;
50         margin:18px 0 4px;
51 }
52 h5 {
53         color:#BD5300;
54         margin:8px 0 4px;
55 }
56 p {
57         margin:8px 0;
58         line-height:18px;
59 }
60 a {
61         color:#DCE9F5;
62         text-decoration:none;
63 }
64 a:hover {
65         color:#D95F00;
66 }
67 th {
68         font-size:13px;
69         padding:2px;
70         border:1px solid #436688;
71         background-color:#001021;
72         cursor:pointer;
73 }
74 th:hover {
75         color:#fff;
76         text-shadow:1px 1px 3px #5A8BBC !important;
77 }
78 td {
79         border:1px solid #436688;
80         font-size:10px;
81         padding:4px;
82         vertical-align: middle;
83 }
84 td.gt_icon {
85     text-align: center;
86 }
87 blockquote {
88         font-size:14px;
89         color:#fff;
90         margin:12px 15px;
91         line-height:22px;
92         padding:10px;
93         border:1px solid #6D8399;
94         border-left:3px solid #B5DAFF;
95         background-color: rgba(105,105,105,0.1);
96 }
97 code {
98         display:block;
99         border:1px solid #999;
100         padding:10px;
101         margin:12px 15px;
102         white-space: pre;
103 }
104 table { width:100%; }
105 input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
106 /* helpers */
107 .clearfix:after {
108     content: ".";
109     display: block;
110     height: 0;
111     clear: both;
112     visibility: hidden;
113 }
114
115 /* layout */
116 #container {
117         position:relative;
118         width:1052px;
119         background: transparent url('img/web_background_l2.png') no-repeat center top;
120         margin:0 auto;
121         padding-top:200px;
122 }
123 #content {
124         position:relative;
125         top:-20px;
126         /*min-width:512px;
127         max-width:986px;
128         width:auto;*/
129         width:950px;
130         padding-bottom:20px;
131 }
132 #title {
133         position:relative;
134         text-align:center;
135         height:25px;
136         line-height:25px;
137         top:-48px;
138         color:#DCE9F5;
139 }
140 .table_block {
141     float: left;
142     padding-right: 25px;
143 }
144 .window {
145         border-width: 56px 56px 56px;
146         -moz-border-image: url(img/web_border.png) 85 85 85 stretch;
147         -webkit-border-image: url(img/web_border.png) 72 85 85 stretch;
148         -o-border-image: url(img/web_border.png) 96 96 96 stretch;
149         border-image: url(img/web_border.png) 96 96 96 stretch;
150 }
151 #main {
152         position:relative;
153         width:610px;
154 }
155 #sidebar {
156         width: 320px;
157         margin-right:5px;
158 }
159 #main.left, #sidebar.left {
160         float:left;
161 }
162 #main.right, #sidebar.right {
163         float:right;
164 }
165 #footer{
166     clear: both;
167     text-align: center;
168 }
169
170 /* Main Menu */
171 #menu {
172         top: -40px;
173         left:-18px;
174     width: 976px;
175         list-style:none;
176         border:1px solid #AED5FE;
177         border-top:0;
178         -moz-border-radius: 0 0 4px 4px;
179         -webkit-border-radius: 0 0 4px 4px;
180         border-radius: 0 0 4px 4px;
181 }
182 #menu li {
183         display:inline;
184 }
185 #menu li a {
186         width:145px;
187         height:32px;
188         line-height:32px;
189         vertical-align:middle;
190         color:#AED5FE;
191         text-align:center;
192 }
193
194 /* drop-down navigation */
195 .nav, .nav ul {
196         list-style: none;
197         margin: 0;
198         padding: 0;
199 }
200
201 .nav {
202   z-index: 100;
203   position: relative;
204 }
205 .nav li {
206   border-right: 1px solid #AED5FE;
207   float: left;
208   margin: 0;
209   padding: 0;
210   position: relative;
211 }
212 .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
213   display: block;
214   padding: 0;
215   text-decoration:none;
216 }
217
218 .nav li a:hover {
219         background-color:#111 !important;
220         color:#fff !important;
221         text-shadow:1px 1px 3px #5A8BBC !important;
222 }
223
224 .nav ul {
225   border-bottom: 1px solid #000;
226   list-style: none;
227   margin: 0;
228   min-width:164px;
229   position: absolute;
230   top: -999em;
231 }
232 .nav li:hover ul,
233 .nav li.sfHover ul {
234   top: 32px;
235   z-index:1000;
236 }
237 .nav ul li {
238   border:0;
239   float: none;
240 }
241 .nav ul a {
242   width: 145px;
243   white-space: nowrap;
244   border-bottom:1px solid #AED5FE;
245 }
246 .nav ul a:hover {
247         background-color:#111 !important;
248         color:#fff !important;
249 }
250 .nav li.last {
251         border-right:1px solid #AED5FE !important;
252 }
253 .nav2 {
254         border:1px solid #AED5FE;
255         left:-1px;
256 }
257 .nav2 li a {
258         background-color:#000;
259         width:164px !important;
260 }
261
262
263 /* UI widgets */
264 .button {
265         display:inline-block;
266         background: url(img/web_button_sprite.png) no-repeat -128px 0;
267         height:32px;
268         width:190px;
269         line-height:24px;
270         text-align:center;
271         color:#ccc;
272         text-decoration:none;
273         border:0;
274         padding:0;
275         cursor:pointer;
276 }
277 a.button {
278         height:24px;
279         width:160px;
280         line-height:24px;
281         padding:4px 16px;
282 }
283 .button.s { background-position:0 0; width:126px; }
284 .button.m { background-position:-320px 0; width:318px; }
285 .button.l { background-position:-640px 0; width:638px; }
286 a.button.s { width:96px; }
287 a.button.m { width:288px; }
288 a.button.l { width:608px; }
289
290 .button.s:hover { background-position:0 -33px; }
291 .button:hover { background-position:-128px -33px; }
292 .button.m:hover { background-position:-320px -33px; }
293 .button.l:hover { background-position:-640px -33px; }
294
295 .button.s:active, .button.s:focus  { background-position:0 -66px; }
296 .button:active, .button:focus { background-position:-128px -66px; }
297 .button.m:active, .button.m:focus { background-position:-320px -66px; }
298 .button.l:active, .button.l:focus { background-position:-640px -66px; }
299
300 .button:hover, .button:active, .button:focus {
301         outline:0;
302 }
303
304 input[type=text], .textbox {
305         display:inline-block;
306         background: url(img/inputbox_sprite.png) no-repeat -128px 0;
307         width:150px;
308         height:24px;
309         line-height:24px;
310         text-align:left;
311         color:#ccc;
312         text-decoration:none;
313         padding:4px 16px;
314         border:0;
315 }
316
317 .textbox.s { background-position: 0 0; width:96px; }
318 .textbox.m { background-position:-320px 0; width:288px; }
319 .textbox.l { background-position:-640px 0; width:608px; }
320
321 .textbox.s:hover { background-position:0 -32px; }
322 input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
323 .textbox.m:hover { background-position:-320px -32px; }
324 .textbox.l:hover { background-position:-640px -32px; }
325
326 .textbox:hover, .textbox:active, .textbox:focus, input[type=text] {
327         outline:none;
328 }
329
330 .checkbox, .radio {
331         display: none;
332 }
333 .checkbox-label {
334         background: url('img/web_checkbox_n0.png') no-repeat;
335         padding-left: 40px;
336         padding-top: 3px;
337         margin: 5px;
338         height: 32px;
339         display: inline-block;
340         cursor:pointer;
341 }
342 .checkbox-label:hover, .radio-label:hover{
343         text-decoration: underline;
344 }
345 .checkbox-selected, .radio-selected {
346         background: url('img/web_checkbox_n1.png') no-repeat;
347 }
348 .radio-label {
349         background: url("img/web_radiobutton_n0.png") no-repeat;
350         padding-left: 60px;
351         padding-top: 3px;
352         margin: 5px;
353         height: 64px;
354         width: 64px;
355         display: block;
356         float: left;
357         cursor:pointer;
358 }
359 .radio-selected {
360         background: url("img/web_radiobutton_n1.png") no-repeat;
361 }
362
363 /* Content Specific */
364
365 /*Tables */
366 #top-players, #top-servers, #top-maps {
367     float: left;
368     margin-bottom: 10px;
369     width:100%;
370 }
371
372 #recent-games {
373     width: 950px;
374 }
375 #recent-games_filter {
376         position: absolute;
377         top: -38px;
378         right: 0;
379 }
380 #search { margin-bottom:10px; }
381 table { text-shadow:1px 1px 4px #013; }
382 thead {
383         background-color:#020F1C;
384 }
385 thead.red {
386         color:#EEAFAB;
387         background-color:#170403;
388         text-shadow:1px 1px 4px #722;
389 }
390 tr.odd.red {
391         background-color:#571612;
392 }
393 tr.even.red {
394         background-color:#571612;
395 }
396 thead.blue {
397         color:#ABBBEE;
398         background-color:#04081A;
399         text-shadow:1px 1px 4px #227;
400 }
401 tr.odd.blue {
402         background-color:#000F4C;
403 }
404 tr.even.blue {
405         background-color:#000F4C;
406 }
407
408 /* Containers */
409 #filter {
410         float:left;
411         width:200px;
412 }
413 #recent-games-list {
414         float:right;
415         width:735px;
416 }
417 .game {
418         float:left;
419     background-image: -moz-linear-gradient(center bottom , #062C52, #041B33);
420         background-image: -webkit-gradient(
421                 linear,
422                 left bottom,
423                 left top,
424                 color-stop(0.51, #062C52),
425                 color-stop(0.51, #041B33)
426         );
427     border: 1px solid #A4B7CA;
428     border-radius: 7px;
429     -moz-border-radius: 7px;
430     -webkit-border-radius: 7px;
431     margin-bottom: 20px;
432     padding: 10px 7px;
433         box-shadow: 0 0 3px 1px;
434         min-width:700px;
435 }
436
437 .game img {
438   float: left;
439 }
440 .game h3 {
441         color:#93B1CF;
442         text-shadow:1px 1px 2px #000;
443         padding:4px 4px 8px;
444         margin: 20px 0 0 0;
445 }
446 .game h3 a {
447         color:#C5DCF3;
448 }
449 .game h3 a:hover {
450         color:#fff;
451 }
452 .game th {
453         font-size:10px;
454         padding:2px 5px;
455         min-width:50px;
456 }
457 .game th.nick {
458         text-align:right;
459         width:160px;
460         max-width:260px;
461 }
462 .game tr {
463         font-size:14px;
464 }
465 .game td:first-child {
466         text-align:right;
467         padding-right:8px;
468 }
469 .permalink {
470         float:right;
471         font-size:12px;
472 }
473 .permalink a {
474         color:#6F8194 !important;
475 }
476 .permalink a:hover {
477         color:#A4B7CA !important;
478         text-decoration:underline;
479 }