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