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