splash.css (9889B)
1 @font-face{ 2 font-family: "Latin-Mono-Regular"; 3 src: url('fonts/lmmono10-regular.otf'), 4 url('fonts/lmmono10-regular.otf'); /* IE */ 5 } 6 7 @font-face{ 8 font-family: "Latin-Mono-Italic"; 9 src: url('fonts/lmmono10-italic.otf'), 10 url('fonts/lmmono10-italic.otf'); /* IE */ 11 } 12 13 @font-face{ 14 font-family: "Roberta"; 15 src: url('fonts/roberta.ttf'), 16 url('fonts/roberta.ttf'); /* IE */ 17 } 18 19 @font-face{ 20 font-family: "Digital"; 21 src: url('fonts/digital_counter_7.ttf'), 22 url('fonts/digital_counter_7.ttf'); /* IE */ 23 } 24 @font-face{ 25 font-family: "Retro"; 26 src: url('fonts/retro.ttf'), 27 url('fonts/retro.ttf'); /* IE */ 28 } 29 @font-face{ 30 font-family: "Cyber"; 31 src: url('fonts/cyber.ttf'), 32 url('fonts/cyber.ttf'); /* IE */ 33 } 34 35 body 36 { 37 margin:0 auto; 38 border:0px; 39 text-align: center; 40 background-color:#242021; 41 font-family: 'Latin-Mono-Regular', sans-serif; 42 font-weight: normal; 43 color: #f4f4f4; 44 font-size: 12pt; 45 } 46 47 a 48 { 49 color:#FFBA00; 50 text-decoration: none; 51 } 52 53 a:hover 54 { 55 color: #fcdd09; 56 padding: 2px; 57 } 58 59 h1 60 { 61 padding: 0px; 62 margin: 0px; 63 font-size: 100px; 64 color:#f8f9fa; 65 font-family: 'Roberta', sans-serif; 66 line-height: 75px; 67 font-weight: normal; 68 } 69 70 h2 71 { 72 padding: 0px; 73 margin: 0px; 74 font-size: 50pt; 75 line-height: 55px; 76 font-family: 'Latin-Mono-Italic', sans-serif; 77 font-weight: normal; 78 } 79 80 81 h3 82 { 83 padding: 0px; 84 margin: 0px; 85 font-size: 50pt; 86 line-height: 45px; 87 color:#f8f9fa; 88 text-transform:uppercase; 89 font-family: 'Roberta', sans-serif; 90 font-weight: normal; 91 } 92 93 h4 94 { 95 padding: 0px; 96 margin: 0px; 97 font-size: 35pt; 98 line-height: 40px; 99 font-family: 'Cyber', sans-serif; 100 font-weight: normal; 101 } 102 103 h5 104 { 105 padding: 0px; 106 margin: 30px; 107 color:#f8f9fa; 108 font-size: 35pt; 109 line-height: 40px; 110 font-family: 'Retro', sans-serif; 111 font-weight: normal; 112 } 113 114 h6 115 { 116 padding: 0px; 117 margin: 0px; 118 font-size: 30pt; 119 font-family: 'Digital', sans-serif; 120 font-weight: normal; 121 } 122 123 124 table 125 { 126 padding: 0px; 127 margin: 0px auto; 128 width: 80%; 129 font-style: normal; 130 font-weight: normal; 131 132 } 133 134 td { 135 display: block; 136 clear:both; 137 } 138 139 th { 140 display: block; 141 clear:both; 142 } 143 144 video 145 { 146 width: 100%; 147 } 148 149 input 150 { 151 width: 70%; 152 height: 30px; 153 border: 0px solid; 154 color: #fff; 155 padding-left: 5px; 156 padding-right: 5px; 157 background-color:#555; 158 border-radius: 3px; 159 } 160 161 button 162 { 163 color: #fff; 164 border-radius: 3px; 165 font-size: 14pt; 166 font-family: 'Roberta', sans-serif; 167 background-color: #444; 168 border: 0px; 169 padding: 5px; 170 height: 30px; 171 width: 20%; 172 } 173 174 button:hover 175 { 176 177 background-color: #ff0000; 178 } 179 180 img 181 { 182 border-radius: 30px; 183 width: 100%; 184 max-width: 600px; 185 } 186 187 .introtext img 188 { 189 width: 200px; 190 } 191 192 #visitors img 193 { 194 border-radius: 0px; 195 width: auto; 196 max-width: auto; 197 } 198 199 #container 200 { 201 margin: 0px auto; 202 height: auto; 203 max-width: 400px; 204 text-align: center; 205 } 206 207 #propaganda-container 208 { 209 margin: 0px auto; 210 height: auto; 211 width: 90%; 212 text-align: center; 213 } 214 215 .introtext 216 { 217 margin: 0px auto; 218 width: 80%; 219 height: auto; 220 text-align: center; 221 max-width: 400px; 222 } 223 224 .promotext 225 { 226 margin: 0px auto; 227 width: 50%; 228 height: auto; 229 text-align: center; 230 max-width: 400px; 231 } 232 233 .bild 234 { 235 236 background-color: #29252b; 237 border-radius: 5px; 238 } 239 .bild p 240 { 241 font-size: 14px; 242 margin:0px; 243 } 244 .bild h4 245 { 246 padding:5px; 247 } 248 249 #album 250 { 251 margin: 0px auto; 252 height: auto; 253 width: 90%; 254 max-width: 900px; 255 } 256 257 #default 258 { 259 margin: 0 auto; 260 padding-top: 5px; 261 width: 95%; 262 max-width: 400px; 263 height: auto; 264 } 265 266 #logo 267 { 268 padding-top: 5px; 269 width: 95%; 270 padding-bottom: 6px; 271 } 272 273 #tools 274 { 275 font-family: 'Roberta', sans-serif; 276 font-size:25pt; 277 padding-bottom: 10px; 278 } 279 280 #shoutbox 281 { 282 text-align: left; 283 padding-left: 5%; 284 padding-top: 10px; 285 padding-bottom: 20px; 286 } 287 288 #shoutbox p 289 { 290 margin: 2px; 291 } 292 293 #matrix-shoutbox 294 { 295 margin-top: 10px; 296 } 297 298 #matrix-shoutbox img 299 { 300 width: 90%; 301 } 302 303 #time 304 { 305 font-size: 8pt; 306 color: #98ffff; 307 } 308 309 #msg 310 { 311 font-size: 11pt; 312 color: #98ffff; 313 } 314 315 #top 316 { 317 margin: 0 auto; 318 text-align: center; 319 height: 60vh; 320 width: 50%; 321 } 322 323 #robin 324 { 325 background-color:#3B6861; 326 padding-bottom: 100px; 327 margin: 0px auto; 328 font-weight: normal; 329 font-size: 16px; 330 text-align: center; 331 } 332 333 #footer 334 { 335 position: fixed; 336 margin: 0 auto; 337 background-color:#231f20; 338 font-weight: normal; 339 font-size: 17px; 340 bottom:0px; 341 padding-top:10px; 342 height:30px; 343 width: 100%; 344 } 345 346 #onair 347 { 348 font-size: 30px; 349 color: #DB232C; 350 opacity: 0.2; 351 } 352 353 #tipjar img 354 { 355 max-width: 350px; 356 padding:2px; 357 background-color:#fff; 358 width: 35%; 359 border-radius: 2px; 360 } 361 #onair.neon {opacity: 1} 362 #onair.neonoff {opacity: 0.2} 363 364 #onairvideo 365 { 366 font-family: "Digital"; 367 font-size: 14px; 368 color: #032604; 369 opacity: 0.5; 370 text-align: center; 371 padding-top: 5px; 372 padding-bottom: 5px; 373 } 374 375 #onairvideo.neongreen {opacity: 1} 376 #onairvideo.neongreenoff {opacity: 0.2} 377 378 #song { 379 font-family: "Digital"; 380 font-size: 15px; 381 color: #fcdd09; 382 opacity: 0.5; 383 text-align: center; 384 padding-top: 10px; 385 } 386 387 #lyssnare { 388 font-family: "Digital"; 389 font-size: 15px; 390 color: #7CFC00; 391 opacity: 0.5; 392 text-align: center; 393 padding-top: 10px; 394 } 395 396 #bag 397 { 398 margin: 0px auto; 399 position:fixed; 400 color:#fff; 401 top:0; 402 width:100%; 403 background:#0A5200; 404 } 405 406 #insidebag 407 { 408 margin: 10px auto; 409 font-size: 14px; 410 width:100%; 411 } 412 413 table, tbody, tr, td 414 { 415 width: 100%; 416 } 417 418 input, select 419 { 420 padding: 4px; 421 color: #fff; 422 background-color: #555; 423 font-size: 16px; 424 border: 0px; 425 } 426 427 textarea 428 { 429 padding: 4px; 430 color: #fff; 431 background-color: #555; 432 font-size: 16px; 433 border: 0px; 434 width: 100%; 435 height: 20px; 436 } 437 438 button 439 { 440 margin:10px; 441 padding: 4px; 442 font-size: 18px; 443 color: #fff; 444 background-color: #333; 445 width: 90%; 446 } 447 448 pre 449 { 450 white-space: pre-wrap; /* Since CSS 2.1 */ 451 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 452 white-space: -pre-wrap; /* Opera 4-6 */ 453 white-space: -o-pre-wrap; /* Opera 7 */ 454 word-wrap: break-word; /* Internet Explorer 5.5+ */ 455 } 456 457 .logo 458 { 459 width: 80%; 460 height:auto; 461 } 462 463 .logo2 464 { 465 width: 70%; 466 height:auto; 467 } 468 469 .intro 470 { 471 margin: 10px auto; 472 scroll-margin-top: 10rem; 473 padding: 10px; 474 border-radius:5px; 475 padding-bottom: 20px; 476 } 477 478 .product 479 { 480 margin: 10px auto; 481 scroll-margin-top: 10rem; 482 width: 80%; 483 padding: 10px; 484 border-radius:5px; 485 background-color:#333; 486 padding-bottom: 20px; 487 } 488 489 .editproduct 490 { 491 margin: 1px; 492 display:inline-block; 493 border-radius:5px; 494 background-color:#333; 495 } 496 497 .orders 498 { 499 margin:0 auto; 500 background-color:#333; 501 font-weight: normal; 502 font-style: normal; 503 font-size: 15px; 504 padding-top: 5px; 505 padding-left: 20px; 506 padding-right: 20px; 507 text-align: left; 508 height: auto; 509 width: 90%; 510 padding-bottom: 20px; 511 border-radius:5px; 512 } 513 514 .imgprod 515 { 516 border-radius:5px; 517 } 518 519 #payid 520 { 521 margin: 0px auto; 522 color: #888; 523 text-decoration: normal; 524 background-color: #111; 525 border: 0px; 526 width: 100%; 527 font-size: 10px; 528 text-align: center; 529 white-space: pre-wrap; /* CSS3 */ 530 white-space: -moz-pre-wrap; /* Firefox */ 531 white-space: -pre-wrap; /* Opera <7 */ 532 white-space: -o-pre-wrap; /* Opera 7 */ 533 word-wrap: break-word; /* IE */ 534 } 535 536 #payreq 537 { 538 margin: 0px auto; 539 color: #888; 540 background-color: #111; 541 border: 0px; 542 width: 100%; 543 height: 55px; 544 font-size: 10px; 545 text-align: center; 546 white-space: pre-wrap; /* CSS3 */ 547 white-space: -moz-pre-wrap; /* Firefox */ 548 white-space: -pre-wrap; /* Opera <7 */ 549 white-space: -o-pre-wrap; /* Opera 7 */ 550 word-wrap: break-word; /* IE */ 551 } 552 553 #copybutton 554 { 555 color: #333; 556 text-decoration: bold; 557 background-color: #111; 558 border: 0px; 559 padding: 5px; 560 width: auto; 561 } 562 563 #backbutton 564 { 565 color: #333; 566 text-decoration: bold; 567 background-color: #111; 568 border: 0px; 569 padding: 5px; 570 width: auto; 571 } 572 573 #description 574 { 575 height:300px; 576 } 577 578 #description2 579 { 580 height:300px; 581 } 582 583 .neonoff { 584 font-family: "Latin-Mono-Regular"; 585 color: #DB232C; 586 text-transform: uppercase; 587 text-align: center; 588 opacity: 0.2; 589 } 590 591 .neon { 592 font-family: "Roberta"; 593 color: #DB232C; 594 text-align: center; 595 opacity: 1; 596 } 597 598 .neon { 599 animation: neon 20.9s infinite alternate; 600 -moz-animation: neon 20.9s infinite alternate; 601 -webkit-animation: neon 20.9s infinite alternate; 602 } 603 604 .neongreenoff { 605 font-family: "Digital"; 606 color: #23db29; 607 text-transform: uppercase; 608 text-align: center; 609 opacity: 0.2; 610 } 611 612 .neongreen { 613 font-family: "Digital"; 614 color: #D2974E; 615 text-transform: uppercase; 616 text-align: center; 617 opacity: 1; 618 } 619 620 .neongreen { 621 animation: neongreen 20.9s infinite alternate; 622 -moz-animation: neongreen 20.9s infinite alternate; 623 -webkit-animation: neongreen 20.9s infinite alternate; 624 } 625 626 @keyframes neon { 627 0%, 19%, 21%, 23%, 25%, 14%, 6%, 10% { 628 text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16; 629 color: #DB232C; 630 } 631 50% { 632 text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B; 633 } 634 20%, 24%, 55% { 635 text-shadow: none; 636 box-shadow: none; 637 } 638 } 639 640 @keyframes neongreen { 641 0%, 19%, 21%, 23%, 25%, 14%, 26%, 10% { 642 text-shadow: 0 0 1vw #16fa1e, 0 0 3vw #16fa1e, 0 0 10vw #16fa1e, 0 0 10vw #16fa1e; 643 color: #26db23; 644 } 645 50% { 646 text-shadow: 0 0 .5vw #0d7f0b, 0 0 1.5vw #0d7f0b, 0 0 5vw #0d7f0b, 0 0 5vw #0d7f0b; 647 } 648 2%, 14%, 5% { 649 text-shadow: none; 650 box-shadow: none; 651 } 652 } 653