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