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/web_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 }