API tools faq
paste
Advertisement
corumbaplay

xbox one dk.css

corumbaplay
May 13th, 2025 (edited)
224
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 69.26 KB | None | 0 0
raw download clone embed print report
  1. /*Font Imports*/
  2. @import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
  3.  
  4. /*Keyframes*/
  5. @-webkit-keyframes messagefade {
  6.     0% {
  7.         opacity: 1;
  8.     }
  9.     75% {
  10.         opacity: 1;
  11.     }
  12.     99% {
  13.         opacity: 0;
  14.         top: 0;
  15.     }
  16.     100% {
  17.         opacity: 0;
  18.         top: -51px;
  19.     }
  20. }
  21.  
  22. @-moz-keyframes messagefade {
  23.     0% {
  24.         opacity: 1;
  25.     }
  26.     75% {
  27.         opacity: 1;
  28.     }
  29.     99% {
  30.         opacity: 0;
  31.         top: 0;
  32.     }
  33.     100% {
  34.         opacity: 0;
  35.         top: -51px;
  36.     }
  37. }
  38.  
  39. @keyframes messagefade {
  40.     0% {
  41.         opacity: 1;
  42.     }
  43.     75% {
  44.         opacity: 1;
  45.     }
  46.     99% {
  47.         opacity: 0;
  48.         top: 0;
  49.     }
  50.     100% {
  51.         opacity: 0;
  52.         top: -51px;
  53.     }
  54. }
  55.  
  56. @keyframes helptip {
  57.     0% {
  58.         margin: 0 0 0 0px;
  59.     }
  60.     10% {
  61.         margin: 0 0 0 -15px;
  62.     }
  63.     20% {
  64.         margin: 0 0 0 0px;
  65.     }
  66.     30% {
  67.         margin: 0 0 0 -15px;
  68.     }
  69.     40% {
  70.         margin: 0 0 0 0px;
  71.     }
  72.     50% {
  73.         margin: 0 0 0 -15px;
  74.     }
  75.     60% {
  76.         margin: 0 0 0 0px;
  77.     }
  78.     70% {
  79.         margin: 0 0 0 -15px;
  80.     }
  81.     80% {
  82.         margin: 0 0 0 0px;
  83.     }
  84.     90% {
  85.         margin: 0 0 0 -15px;
  86.         visibility: visible;
  87.         opacity: 1;
  88.     }
  89.     100% {
  90.         margin: 0 0 0 0px;
  91.         visibility: hidden;
  92.         opacity: 0;
  93.     }
  94. }
  95.  
  96. @keyframes msg-animation {
  97.     80% {
  98.         opacity: 1;
  99.     }
  100.     99.99% {
  101.         opacity: 0;
  102.         height: auto;
  103.         visibility: visible;
  104.         margin-bottom: 5px;
  105.         padding: 5px;
  106.     }
  107.     100%{
  108.         height: 0px;
  109.         margin: 0px;
  110.         padding: 0px;
  111.         visibility: hidden;
  112.     }
  113. }
  114.  
  115. /* Didn't work, used transitions instead
  116. @keyframes modal-flow {
  117.     from {visibility: hidden;top:-100px;opacity: 0;}
  118.     to {visitbility: visible;top:0px;opacity:1;}
  119. }
  120. @-moz-keyframes modal-flow {
  121.     from {transform: scale(3.3) rotateX(60deg) translateY(-100%);}
  122.     to {transform: scale(1) rotateX(0deg) translateY(0%);}
  123. }*/
  124. /*END Keyframes*/
  125.  
  126. /*Top Level Elements*/
  127. ::selection {
  128.     background: rgba(9, 63, 59, 0.75);
  129. }
  130.  
  131. sup {
  132.     vertical-align: super;
  133.     font-size: smaller;
  134. }
  135.  
  136. html, body {
  137.     font-family: 'Source Sans Pro', sans-serif;
  138.     overflow-y: hidden;
  139. }
  140.  
  141. a {
  142.     color: #FF5722;
  143.     text-decoration: underline;
  144. }
  145.  
  146. b {
  147.     font-weight: bold;
  148. }
  149.  
  150. em {
  151.     font-style: italic;
  152. }
  153.  
  154. h2 {
  155.     font-size: 25px;
  156.     margin-bottom: 5px;
  157. }
  158.  
  159. h3 {
  160.     font-size: 20px;
  161.     margin-bottom: 5px;
  162. }
  163.  
  164. strong {
  165.     font-weight: bold;
  166. }
  167.  
  168. /*Container classes and whatnot*/
  169. .container {
  170.     width: 668px;
  171.     margin: 0 auto;
  172. }
  173.  
  174. .clear {
  175.     clear: both;
  176.     display: block;
  177. }
  178.  
  179. .hide-me {
  180.     display: none !important;
  181. }
  182.  
  183. .main-content {
  184.     background: saddlebrown;
  185. }
  186.  
  187. /* Hide ad code if unfilled */
  188. .adsbygoogle[data-ad-status='unfilled'] {
  189.     display: none !important;
  190. }
  191.  
  192. /*Now here's where the fun begins...*/
  193. .controller {
  194.     position: absolute;
  195.     top: 50%;
  196.     left: 50%;
  197.     transform: translate(-50%, -50%);
  198.     display: none;
  199.     margin-top: 30px !important;
  200.     margin-left: 0px !important;
  201. }
  202.  
  203. .controller.half {
  204.     margin-top: 0px !important;
  205. }
  206.  
  207. /*BEGIN Xbox 360 Controller Styling*/
  208. .controller.xbox-old {
  209.     background: url(xbox-assets-old/bg.png);
  210.     height: 544px;
  211.     width: 668px;
  212.     /*    margin-left: -332px;
  213.         margin-top: -228px;*/
  214. }
  215.  
  216. .xbox-old.disconnected {
  217.     background: url(xbox-assets-old/bg-disconnect.png);
  218. }
  219.  
  220. .xbox-old.disconnected div {
  221.     display: none;
  222. }
  223.  
  224. .xbox-old .triggers {
  225.     width: 430px;
  226.     height: 76px;
  227.     position: absolute;
  228.     left: 119px;
  229. }
  230.  
  231. .xbox-old .trigger {
  232.     width: 33px;
  233.     height: 76px;
  234.     background: url(xbox-assets-old/trigger.png);
  235.     opacity: 0;
  236. }
  237.  
  238. .xbox-old .trigger.left {
  239.     float: left;
  240.     background-position: 0 0;
  241. }
  242.  
  243. .xbox-old .trigger.right {
  244.     float: right;
  245.     background-position: 0 -77px;
  246. }
  247.  
  248. .xbox-old .bumper {
  249.     width: 119px;
  250.     height: 44px;
  251.     background: url(xbox-assets-old/bumper.png);
  252.     opacity: 0;
  253. }
  254.  
  255. .xbox-old .bumpers {
  256.     position: absolute;
  257.     width: 516px;
  258.     height: 44px;
  259.     left: 76px;
  260.     top: 84px;
  261. }
  262.  
  263. .xbox-old .bumper.pressed {
  264.     opacity: 1;
  265. }
  266.  
  267. .xbox-old .bumper.left {
  268.     float: left;
  269. }
  270.  
  271. .xbox-old .bumper.right {
  272.     float: right;
  273.     -webkit-transform: rotateY(180deg);
  274.     transform: rotateY(180deg);
  275. }
  276.  
  277. .xbox-old .quadrant {
  278.     position: absolute;
  279.     background: url(xbox-assets-old/quadrant.png);
  280.     height: 100px;
  281.     width: 100px;
  282.     top: 165px;
  283.     left: 284px;
  284.     z-index: -1;
  285. }
  286.  
  287. .xbox-old .p0 {
  288.     -webkit-transform: rotate(0deg);
  289.     transform: rotate(0deg);
  290. }
  291.  
  292. .xbox-old .p1 {
  293.     -webkit-transform: rotate(90deg);
  294.     transform: rotate(90deg);
  295. }
  296.  
  297. .xbox-old .p2 {
  298.     -webkit-transform: rotate(270deg);
  299.     transform: rotate(270deg);
  300. }
  301.  
  302. .xbox-old .p3 {
  303.     -webkit-transform: rotate(180deg);
  304.     transform: rotate(180deg);
  305. }
  306.  
  307. .xbox-old .arrows {
  308.     position: absolute;
  309.     width: 180px;
  310.     height: 29px;
  311.     top: 200px;
  312.     left: 244px;
  313. }
  314.  
  315. .xbox-old .back, .xbox-old .start {
  316.     background: url(xbox-assets-old/arrow.png);
  317.     width: 34px;
  318.     height: 29px;
  319. }
  320.  
  321. .xbox-old .back.pressed, .xbox-old .start.pressed {
  322.     background-position: 0 -30px;
  323. }
  324.  
  325. .xbox-old .back {
  326.     float: left;
  327.     -webkit-transform: rotateY(180deg);
  328.     transform: rotateY(180deg);
  329. }
  330.  
  331. .xbox-old .start {
  332.     float: right;
  333. }
  334.  
  335. .xbox-old .abxy {
  336.     position: absolute;
  337.     width: 161px;
  338.     height: 160px;
  339.     top: 125px;
  340.     left: 451px
  341. }
  342.  
  343. .xbox-old .button {
  344.     position: absolute;
  345.     width: 54px;
  346.     height: 54px;
  347. }
  348.  
  349. .xbox-old .button.a {
  350.     width: 53px;
  351.     height: 53px;
  352. }
  353.  
  354. .xbox-old .button.y {
  355.     width: 55px;
  356.     height: 54px;
  357. }
  358.  
  359. .xbox-old .button.pressed {
  360.     background-position: 0 -55px;
  361.     margin-top: 6px;
  362.     opacity: 1;
  363. }
  364.  
  365. .xbox-old .button.pressed.a {
  366.     background-position: 0 -54px;
  367. }
  368.  
  369. .xbox-old .button.pressed.y {
  370.     background-position: 0 -56px;
  371. }
  372.  
  373. .xbox-old .a {
  374.     background: url(xbox-assets-old/a.png);
  375.     top: 108px;
  376.     left: 55px;
  377. }
  378.  
  379. .xbox-old .b {
  380.     background: url(xbox-assets-old/b.png);
  381.     top: 54px;
  382.     right: 0px;
  383. }
  384.  
  385. .xbox-old .x {
  386.     background: url(xbox-assets-old/x.png);
  387.     top: 54px;
  388. }
  389.  
  390. .xbox-old .y {
  391.     background: url(xbox-assets-old/y.png);
  392.     left: 54px;
  393. }
  394.  
  395. .xbox-old .sticks {
  396.     position: absolute;
  397.     width: 383px;
  398.     height: 208px;
  399.     top: 167px;
  400.     left: 89px;
  401. }
  402.  
  403. .xbox-old .stick {
  404.     position: absolute;
  405.     background: url(xbox-assets-old/stick.png);
  406.     height: 86px;
  407.     width: 86px;
  408. }
  409.  
  410. .xbox-old .stick.pressed {
  411.     background-position: 0 -87px;
  412. }
  413.  
  414. .xbox-old .stick.left {
  415.     top: 0;
  416.     left: 0;
  417. }
  418.  
  419. .xbox-old .stick.right {
  420.     top: calc(100% - 86px);
  421.     left: calc(100% - 86px);
  422. }
  423.  
  424. .xbox-old .dpad {
  425.     position: absolute;
  426.     width: 112px;
  427.     height: 112px;
  428.     top: 273px;
  429.     left: 174px;
  430. }
  431.  
  432. .xbox-old .face {
  433.     position: absolute;
  434.     font-size: 30px;
  435.     line-height: 0;
  436.     color: white;
  437.     opacity: 0;
  438.     font-family: 'FontAwesome';
  439. }
  440.  
  441. .xbox-old .face.pressed {
  442.     opacity: 1;
  443. }
  444.  
  445. .xbox-old .face.up {
  446.     left: 42px;
  447.     top: 20px;
  448. }
  449.  
  450. .xbox-old .face.up:after {
  451.     content: "\f062";
  452. }
  453.  
  454. .xbox-old .face.down {
  455.     left: 42px;
  456.     bottom: 20px;
  457. }
  458.  
  459. .xbox-old .face.down:after {
  460.     content: "\f063";
  461. }
  462.  
  463. .xbox-old .face.left {
  464.     top: 56px;
  465.     left: 3px;
  466. }
  467.  
  468. .xbox-old .face.left:after {
  469.     content: "\f060";
  470. }
  471.  
  472. .xbox-old .face.right {
  473.     top: 56px;
  474.     right: 3px;
  475. }
  476.  
  477. .xbox-old .face.right:after {
  478.     content: "\f061";
  479. }
  480.  
  481. .xbox-old.half {
  482.     margin-top: -272px;
  483. }
  484.  
  485. /*END Xbox 360 Controller Styling*/
  486.  
  487. /*BEGIN Xbox One Controller Styling*/
  488. .controller.xbox {
  489.     background: url(xbox-assets/base.svg);
  490.     height: 630px;
  491.     width: 750px;
  492.     /*    margin-left: -375px;
  493.         margin-top: -285px;*/
  494. }
  495.  
  496. .xbox.white {
  497.     background: url(https://api.onedrive.com/v1.0/drives/E1125AA5B77B2129/items/E1125AA5B77B2129!5859/thumbnails/0/c750x630/content/base-white%20xboxsnex.c750x630.png?prefer=noredirect&cb=2023-05-31T12%3A16%3A39.323Z);
  498.    
  499. }
  500.  
  501. .xbox.disconnected {
  502.     background: url(xbox-assets/disconnected.svg);
  503. }
  504.  
  505. .xbox.disconnected div {
  506.     display: none;
  507. }
  508.  
  509. .xbox .triggers {
  510.     width: 446px;
  511.     height: 121px;
  512.     position: absolute;
  513.     left: 152px;
  514. }
  515.  
  516. .xbox .trigger {
  517.     width: 88px;
  518.     height: 121px;
  519.     background: url(xbox-assets/trigger.svg);
  520.     opacity: 0;
  521. }
  522.  
  523. .xbox .trigger.left {
  524.     float: left;
  525.     background-position: 0 0;
  526. }
  527.  
  528. .xbox .trigger.right {
  529.     float: right;
  530.     transform: rotateY(180deg);
  531. }
  532.  
  533. .xbox .bumper {
  534.     width: 170px;
  535.     height: 61px;
  536.     background: url(xbox-assets/bumper.svg);
  537.     opacity: 0;
  538. }
  539.  
  540. .xbox .bumpers {
  541.     position: absolute;
  542.     width: 536px;
  543.     height: 61px;
  544.     left: 107px;
  545.     top: 129px;
  546. }
  547.  
  548. .xbox .bumper.pressed {
  549.     opacity: 1;
  550. }
  551.  
  552. .xbox .bumper.left {
  553.     float: left;
  554. }
  555.  
  556. .xbox .bumper.right {
  557.     float: right;
  558.     -webkit-transform: rotateY(180deg);
  559.     transform: rotateY(180deg);
  560. }
  561.  
  562. .xbox .quadrant {
  563.     position: absolute;
  564.     background: url(xbox-assets/quadrant.svg);
  565.     height: 45px;
  566.     width: 45px;
  567.     top: 258px;
  568.     left: 354px;
  569.     z-index: 0;
  570. }
  571.  
  572. .xbox .p0 {
  573.     -webkit-transform: rotate(0deg);
  574.     transform: rotate(0deg);
  575. }
  576.  
  577. .xbox .p1 {
  578.     -webkit-transform: rotate(90deg);
  579.     transform: rotate(90deg);
  580. }
  581.  
  582. .xbox .p2 {
  583.     -webkit-transform: rotate(270deg);
  584.     transform: rotate(270deg);
  585. }
  586.  
  587. .xbox .p3 {
  588.     -webkit-transform: rotate(180deg);
  589.     transform: rotate(180deg);
  590. }
  591.  
  592. .xbox .arrows {
  593.     position: absolute;
  594.     width: 141px;
  595.     height: 33px;
  596.     top: 264px;
  597.     left: 306px;
  598. }
  599.  
  600. .xbox .back, .xbox .start {
  601.     background: url(xbox-assets/start-select.svg);
  602.     width: 33px;
  603.     height: 33px;
  604.     opacity: 0;
  605. }
  606.  
  607. .xbox .back.pressed, .xbox .start.pressed {
  608.     opacity: 1;
  609. }
  610.  
  611. .xbox .back {
  612.     float: left;
  613. }
  614.  
  615. .xbox .start {
  616.     background-position: 33px 0px;
  617.     float: right;
  618. }
  619.  
  620. .xbox .abxy {
  621.     position: absolute;
  622.     width: 153px;
  623.     height: 156px;
  624.     top: 192px;
  625.     left: 488px;
  626. }
  627.  
  628. .xbox .button {
  629.     position: absolute;
  630.     background: url(xbox-assets/abxy.svg);
  631.     width: 48px;
  632.     height: 48px;
  633. }
  634.  
  635. .xbox .button.pressed {
  636.     background-position-y: -48px;
  637.     margin-top: 5px;
  638.     opacity: 1;
  639. }
  640.  
  641. .xbox .a {
  642.     background-position: 0 0;
  643.     top: 108px;
  644.     left: 55px;
  645. }
  646.  
  647. .xbox .b {
  648.     background-position: -49px 0;
  649.     top: 58px;
  650.     right: 0px;
  651. }
  652.  
  653. .xbox .x {
  654.     background-position: -98px 0;
  655.     top: 58px;
  656.     left: 4px;
  657. }
  658.  
  659. .xbox .y {
  660.     background-position: 48px 0;
  661.     left: 55px;
  662.     top: 7px;
  663. }
  664.  
  665. .xbox .sticks {
  666.     position: absolute;
  667.     width: 371px;
  668.     height: 196px;
  669.     top: 239px;
  670.     left: 144px;
  671. }
  672.  
  673. .xbox .stick {
  674.     position: absolute;
  675.     background: url(xbox-assets/stick.svg);
  676.     background-position: -85px 0;
  677.     height: 83px;
  678.     width: 83px;
  679. }
  680.  
  681. .xbox .stick.pressed {
  682.     background-position: 0 0;
  683. }
  684.  
  685. .xbox .stick.left {
  686.     top: 0;
  687.     left: 0;
  688. }
  689.  
  690. .xbox .stick.right {
  691.     top: 113px;
  692.     left: 288px;
  693. }
  694.  
  695. .xbox .dpad {
  696.     position: absolute;
  697.     width: 110px;
  698.     height: 111px;
  699.     top: 345px;
  700.     left: 223px;
  701. }
  702.  
  703. .xbox .face {
  704.     background: url(xbox-assets/dpad.svg);
  705.     position: absolute;
  706.     opacity: 0;
  707. }
  708.  
  709. .xbox .face.pressed {
  710.     opacity: 1;
  711. }
  712.  
  713. .xbox .face.up {
  714.     background-position: 34px 0;
  715.     left: 38px;
  716.     top: 0px;
  717.     width: 34px;
  718.     height: 56px;
  719. }
  720.  
  721. .xbox .face.down {
  722.     left: 38px;
  723.     bottom: 0;
  724.     width: 34px;
  725.     height: 56px;
  726. }
  727.  
  728. .xbox .face.left {
  729.     background-position: 0 -93px;
  730.     width: 55px;
  731.     height: 35px;
  732.     top: 38px;
  733.     left: 0;
  734. }
  735.  
  736. .xbox .face.right {
  737.     background-position: 0 -57px;
  738.     width: 55px;
  739.     height: 35px;
  740.     top: 38px;
  741.     right: 0;
  742. }
  743.  
  744. .xbox.half {
  745.     margin-top: -315px;
  746. }
  747.  
  748. .xbox {
  749.     background: no-repeat center;
  750. }
  751.  
  752. /*END Xbox One Controller Styling*/
  753.  
  754. /*BEGIN PS3 Controller Styling*/
  755. .controller.ps {
  756.     background: url(ps3-assets/base.png);
  757.     height: 558px;
  758.     width: 784px;
  759.     /*    margin-left: -392px;
  760.         margin-top: -259px;*/
  761. }
  762.  
  763. .ps.disconnected {
  764.     background: url(ps3-assets/base-disconnect.png);
  765. }
  766.  
  767. .ps.disconnected div {
  768.     display: none;
  769. }
  770.  
  771. .ps .triggers {
  772.     width: 586px;
  773.     height: 65px;
  774.     position: absolute;
  775.     left: 99px;
  776. }
  777.  
  778. .ps .trigger {
  779.     width: 86px;
  780.     height: 65px;
  781.     background: url(ps3-assets/triggers.png);
  782.     opacity: 0;
  783. }
  784.  
  785. .ps .trigger.left {
  786.     float: left;
  787. }
  788.  
  789. .ps .trigger.right {
  790.     float: right;
  791. }
  792.  
  793. .ps .bumper {
  794.     width: 89px;
  795.     height: 28px;
  796.     background: url(ps3-assets/bumpers.png);
  797.     opacity: 0;
  798. }
  799.  
  800. .ps .bumpers {
  801.     position: absolute;
  802.     width: 586px;
  803.     height: 28px;
  804.     left: 99px;
  805.     top: 72px;
  806. }
  807.  
  808. .ps .bumper.pressed {
  809.     opacity: 1;
  810. }
  811.  
  812. .ps .bumper.left {
  813.     -webkit-transform: rotateY(180deg);
  814.     transform: rotateY(180deg);
  815.     float: left;
  816. }
  817.  
  818. .ps .bumper.right {
  819.     float: right;
  820. }
  821.  
  822. .ps .quadrant {
  823.     position: absolute;
  824.     background: url(ps3-assets/player-n.png);
  825.     height: 17px;
  826.     width: 111px;
  827.     top: 140px;
  828.     left: 240px;
  829. }
  830.  
  831. .ps .p0 {
  832.     background-position: 0 -6px;
  833. }
  834.  
  835. .ps .p1 {
  836.     background-position: 0 -28px;
  837. }
  838.  
  839. .ps .p2 {
  840.     background-position: 0 -49px;
  841. }
  842.  
  843. .ps .p3 {
  844.     background-position: 0 -70px;
  845. }
  846.  
  847. .ps .arrows {
  848.     position: absolute;
  849.     width: 205px;
  850.     height: 19px;
  851.     top: 250px;
  852.     left: 291px;
  853. }
  854.  
  855. .ps .back, .ps .start {
  856.     background: url(ps3-assets/menus.png);
  857.     width: 34px;
  858.     height: 19px;
  859. }
  860.  
  861. .ps .back.pressed, .ps .start.pressed {
  862.     background-position-y: -21px;
  863.     margin-top: 2px;
  864. }
  865.  
  866. .ps .back {
  867.     float: left;
  868.     width: 38px;
  869. }
  870.  
  871. .ps .start {
  872.     float: right;
  873.     width: 36px;
  874.     background-position: 37px 0;
  875. }
  876.  
  877. .ps .abxy {
  878.     position: absolute;
  879.     width: 204px;
  880.     height: 205px;
  881.     top: 156px;
  882.     left: 538px;
  883. }
  884.  
  885. .ps .button {
  886.     position: absolute;
  887.     width: 62px;
  888.     height: 62px;
  889.     background: url(ps3-assets/face-buttons.png);
  890. }
  891.  
  892. .ps .button.pressed {
  893.     background-position-y: -64px;
  894.     margin-top: 5px;
  895. }
  896.  
  897. .ps .a {
  898.     background-position: 62px 0;
  899.     top: 142px;
  900.     left: 71px;
  901. }
  902.  
  903. .ps .b {
  904.     background-position: 125px 0;
  905.     top: 71px;
  906.     right: 0px;
  907. }
  908.  
  909. .ps .x {
  910.     background-position: 0 0;
  911.     top: 71px;
  912. }
  913.  
  914. .ps .y {
  915.     background-position: -63px 0;
  916.     left: 71px;
  917. }
  918.  
  919. .ps .sticks {
  920.     position: absolute;
  921.     width: 364px;
  922.     height: 105px;
  923.     top: 328px;
  924.     left: 210px;
  925. }
  926.  
  927. .ps .stick {
  928.     position: absolute;
  929.     background: url(ps3-assets/thumbs.png);
  930.     height: 105px;
  931.     width: 105px;
  932. }
  933.  
  934. .ps .stick.pressed.left {
  935.     background-position-x: -106px;
  936. }
  937.  
  938. .ps .stick.pressed.right {
  939.     background-position-x: -211px;
  940. }
  941.  
  942. .ps .stick.left {
  943.     top: 0;
  944.     left: 0;
  945. }
  946.  
  947. .ps .stick.right {
  948.     top: calc(100% - 105px);
  949.     left: calc(100% - 105px);
  950. }
  951.  
  952. .ps .dpad {
  953.     position: absolute;
  954.     width: 140px;
  955.     height: 132px;
  956.     top: 192px;
  957.     left: 74px;
  958. }
  959.  
  960. .ps .face {
  961.     background: url(ps3-assets/dpad.png);
  962.     position: absolute;
  963. }
  964.  
  965. .ps .face.up, .ps .face.down {
  966.     width: 38px;
  967.     height: 52px;
  968. }
  969.  
  970. .ps .face.left, .ps .face.right {
  971.     width: 52px;
  972.     height: 38px;
  973. }
  974.  
  975. .ps .face.up {
  976.     left: 50px;
  977.     top: 0;
  978.     background-position: 92px 0px;
  979. }
  980.  
  981. .ps .face.down {
  982.     left: 50px;
  983.     top: 79px;
  984.     background-position: 131px 0;
  985. }
  986.  
  987. .ps .face.left {
  988.     top: 47px;
  989.     left: 0;
  990.     background-position: 0px 0;
  991. }
  992.  
  993. .ps .face.right {
  994.     top: 47px;
  995.     right: 0px;
  996.     background-position: 53px 0;
  997. }
  998.  
  999. .ps .face.pressed {
  1000.     margin-top: 5px;
  1001.     background-position-y: 52px;
  1002. }
  1003.  
  1004. .ps.half {
  1005.     margin-top: -279px;
  1006. }
  1007.  
  1008. /*END PS3 Controller Styling*/
  1009.  
  1010. /*BEGIN PS3 White Controller Styling*/
  1011. .controller.ps.white {
  1012.     background-image: url(ps3-white-assets/base.png);
  1013. }
  1014.  
  1015. .ps.white.disconnected {
  1016.     background-image: url(ps3-white-assets/base-disconnect.png);
  1017. }
  1018.  
  1019.  
  1020. .ps.white .trigger {
  1021.     background-image: url(ps3-white-assets/triggers.png);
  1022. }
  1023.  
  1024.  
  1025. .ps.white .bumper {
  1026.     background-image: url(ps3-white-assets/bumpers.png);
  1027. }
  1028.  
  1029. .ps.white .quadrant {
  1030.     background-image: url(ps3-white-assets/player-n.png);
  1031. }
  1032.  
  1033. .ps.white .back, .ps.white .start {
  1034.     background-image: url(ps3-white-assets/menus.png);
  1035. }
  1036.  
  1037. .ps.white .button {
  1038.     background-image: url(ps3-white-assets/face-buttons.png);
  1039. }
  1040.  
  1041. .ps.white .stick {
  1042.     background-image: url(ps3-white-assets/thumbs.png);
  1043. }
  1044.  
  1045. .ps.white .face {
  1046.     background-image: url(ps3-white-assets/dpad.png);
  1047. }
  1048.  
  1049. /*END PS3 White Controller Styling*/
  1050.  
  1051. /*BEGIN PS4 Controller Styling*/
  1052. .controller.ds4 {
  1053.     background: url(ps4-assets/base.svg);
  1054.     height: 598px;
  1055.     width: 806px;
  1056.     /*    margin-left: -403px;
  1057.         margin-top: -280px;*/
  1058. }
  1059.  
  1060. .ds4.disconnected {
  1061.     background: url(ps4-assets/disconnected.svg);
  1062. }
  1063.  
  1064. .ds4.disconnected div {
  1065.     display: none;
  1066. }
  1067.  
  1068. .ds4 .triggers {
  1069.     width: 588px;
  1070.     height: 90px;
  1071.     position: absolute;
  1072.     left: 109px;
  1073. }
  1074.  
  1075. .ds4 .trigger {
  1076.     width: 99px;
  1077.     height: 100%;
  1078.     background: url(ps4-assets/triggers.svg);
  1079.     opacity: 0;
  1080. }
  1081.  
  1082. .ds4 .trigger.left {
  1083.     float: left;
  1084. }
  1085.  
  1086. .ds4 .trigger.right {
  1087.     float: right;
  1088.     background-position-x: 99px;
  1089. }
  1090.  
  1091. .ds4 .bumper {
  1092.     width: 99px;
  1093.     height: 23px;
  1094.     background: url(ps4-assets/bumper.svg) no-repeat;
  1095.     opacity: 0;
  1096. }
  1097.  
  1098. .ds4 .bumpers {
  1099.     position: absolute;
  1100.     width: 588px;
  1101.     height: 23px;
  1102.     left: 109px;
  1103.     top: 94px;
  1104. }
  1105.  
  1106. .ds4 .bumper.pressed {
  1107.     opacity: 1;
  1108. }
  1109.  
  1110. .ds4 .bumper.left {
  1111.     /* -webkit-transform: rotateY(180deg); */
  1112.     /* transform: rotateY(180deg); */
  1113.     float: left;
  1114. }
  1115.  
  1116. .ds4 .bumper.right {
  1117.     float: right;
  1118.     transform: rotateY(180deg);
  1119. }
  1120.  
  1121. .ds4 .touchpad {
  1122.     width: 262px;
  1123.     height: 151px;
  1124.     position: absolute;
  1125.     left: 272px;
  1126.     top: 122px;
  1127. }
  1128.  
  1129. .ds4 .touchpad.pressed {
  1130.     background: url(ps4-assets/touchpad.svg) no-repeat center;
  1131. }
  1132.  
  1133. .ds4 .meta {
  1134.     width: 42px;
  1135.     height: 42px;
  1136.     position: absolute;
  1137.     left: 382px;
  1138.     bottom: 216px;
  1139. }
  1140.  
  1141. .ds4 .meta.pressed {
  1142.     background: url(ps4-assets/meta.svg) no-repeat center;
  1143. }
  1144.  
  1145. /*Not needed, but I like keeping them here for posterity*/
  1146. /*.ds4 .quadrant{
  1147. position: absolute;
  1148. background: url(ps4-assets/player-n.svg);
  1149. height: 17px;
  1150. width: 111px;
  1151. top: 140px;
  1152. left: 240px;
  1153. }
  1154. .ds4 .p0{
  1155. background-position: 0 -6px;
  1156. }
  1157. .ds4 .p1{
  1158. background-position: 0 -28px;
  1159. }
  1160. .ds4 .p2{
  1161. background-position: 0 -49px;
  1162. }
  1163. .ds4 .p3{
  1164. background-position: 0 -70px;
  1165. }*/
  1166. .ds4 .arrows {
  1167.     position: absolute;
  1168.     width: 352px;
  1169.     height: 46px;
  1170.     top: 142px;
  1171.     left: 227px;
  1172. }
  1173.  
  1174. .ds4 .back, .ds4 .start {
  1175.     background: url(ps4-assets/start.svg);
  1176.     width: 28px;
  1177.     height: 46px;
  1178.     opacity: 0;
  1179. }
  1180.  
  1181. .ds4 .back.pressed, .ds4 .start.pressed {
  1182.     /* background-position-y: -21px; */
  1183.     /* margin-top: 2px; */
  1184.     opacity: 1;
  1185. }
  1186.  
  1187. .ds4 .back {
  1188.     float: left;
  1189.     /* width: 28px; */
  1190. }
  1191.  
  1192. .ds4 .start {
  1193.     float: right;
  1194.     /* width: 28px; */
  1195.     background-position: 28px 0;
  1196. }
  1197.  
  1198. .ds4 .abxy {
  1199.     position: absolute;
  1200.     width: 170px;
  1201.     height: 171px;
  1202.     top: 159px;
  1203.     left: 567px;
  1204. }
  1205.  
  1206. .ds4 .button {
  1207.     position: absolute;
  1208.     width: 55px;
  1209.     height: 55px;
  1210.     background: url(ps4-assets/face.svg);
  1211. }
  1212.  
  1213. .ds4 .button.pressed {
  1214.     background-position-y: 55px;
  1215.     /* margin-top: 5px; */
  1216. }
  1217.  
  1218. .ds4 .a {
  1219.     background-position: 0 0;
  1220.     bottom: 0;
  1221.     left: 58px;
  1222. }
  1223.  
  1224. .ds4 .b {
  1225.     background-position: -57px 0;
  1226.     top: 58px;
  1227.     right: 0px;
  1228. }
  1229.  
  1230. .ds4 .x {
  1231.     background-position: -113px 0;
  1232.     top: 58px;
  1233. }
  1234.  
  1235. .ds4 .y {
  1236.     background-position: 55px 0;
  1237.     left: 58px;
  1238. }
  1239.  
  1240. .ds4 .sticks {
  1241.     position: absolute;
  1242.     width: 361px;
  1243.     height: 105px;
  1244.     top: 308px;
  1245.     left: 228px;
  1246. }
  1247.  
  1248. .ds4 .stick {
  1249.     position: absolute;
  1250.     background: url(ps4-assets/sticks.svg);
  1251.     height: 94px;
  1252.     width: 94px;
  1253. }
  1254.  
  1255. .ds4 .stick.pressed.left {
  1256.     background-position-x: -96px;
  1257. }
  1258.  
  1259. .ds4 .stick.pressed.right {
  1260.     background-position-x: -192px;
  1261. }
  1262.  
  1263. .ds4 .stick.left {
  1264.     top: 0;
  1265.     left: 0;
  1266. }
  1267.  
  1268. .ds4 .stick.right {
  1269.     top: calc(100% - 105px);
  1270.     left: calc(100% - 105px);
  1271. }
  1272.  
  1273. .ds4 .dpad {
  1274.     position: absolute;
  1275.     width: 125px;
  1276.     height: 126px;
  1277.     top: 181px;
  1278.     left: 92px;
  1279. }
  1280.  
  1281. .ds4 .face {
  1282.     background: url(ps4-assets/dpad.svg);
  1283.     position: absolute;
  1284. }
  1285.  
  1286. .ds4 .face.up, .ds4 .face.down {
  1287.     width: 36px;
  1288.     height: 52px;
  1289. }
  1290.  
  1291. .ds4 .face.left, .ds4 .face.right {
  1292.     width: 52px;
  1293.     height: 36px;
  1294. }
  1295.  
  1296. .ds4 .face.up {
  1297.     left: 44px;
  1298.     top: 0;
  1299.     background-position: -37px 0px;
  1300. }
  1301.  
  1302. .ds4 .face.down {
  1303.     left: 44px;
  1304.     bottom: 0;
  1305.     background-position: 0px 0;
  1306. }
  1307.  
  1308. .ds4 .face.left {
  1309.     top: 45px;
  1310.     left: 0;
  1311.     background-position: 104px 0;
  1312. }
  1313.  
  1314. .ds4 .face.right {
  1315.     top: 45px;
  1316.     right: 0px;
  1317.     background-position: 52px 0;
  1318. }
  1319.  
  1320. .ds4 .face.pressed {
  1321.     /* margin-top: 5px; */
  1322.     background-position-y: 52px;
  1323. }
  1324.  
  1325. .ds4.half {
  1326.     margin-top: -300px;
  1327. }
  1328.  
  1329. /*END PS4 Controller Styling*/
  1330.  
  1331. /*BEGIN PS4 White Controller Styling*/
  1332. .controller.ds4.white {
  1333.     background-image: url(ps4-white-assets/base.svg);
  1334. }
  1335.  
  1336. .ds4.white.disconnected {
  1337.     background: url(ps4-assets/disconnected.svg);
  1338. }
  1339.  
  1340. .ds4.white .trigger {
  1341.     background-image: url(ps4-white-assets/triggers.svg);
  1342. }
  1343.  
  1344. .ds4.white .bumper {
  1345.     background-image: url(ps4-white-assets/bumper.svg);
  1346. }
  1347.  
  1348. .ds4.white .touchpad.pressed {
  1349.     background-image: url(ps4-white-assets/touchpad.svg);
  1350. }
  1351.  
  1352. .ds4.white .back, .ds4 .start {
  1353.     background-image: url(ps4-white-assets/start.svg);
  1354. }
  1355.  
  1356. .ds4.white .button {
  1357.     background-image: url(ps4-white-assets/face.svg);
  1358. }
  1359.  
  1360. .ds4.white .stick {
  1361.     background-image: url(ps4-white-assets/sticks.svg);
  1362. }
  1363.  
  1364. .ds4.white .face {
  1365.     background-image: url(ps4-white-assets/dpad.svg);
  1366. }
  1367.  
  1368. /*END PS4 White Controller Styling*/
  1369.  
  1370. /*BEGIN NES Controller Styling*/
  1371. .controller.nes {
  1372.     background: url(nes-assets/base.png);
  1373.     width: 832px;
  1374.     height: 391px;
  1375.     /*    margin-left: -416px;
  1376.         margin-top: -175px;*/
  1377. }
  1378.  
  1379. .nes.disconnected {
  1380.     background: url(nes-assets/base-disconnect.png);
  1381. }
  1382.  
  1383. .nes.disconnected div {
  1384.     display: none;
  1385. }
  1386.  
  1387. .nes .quadrant {
  1388.     font-family: 'Press Start 2P', cursive;
  1389.     font-size: 16pt;
  1390.     color: white;
  1391.     position: absolute;
  1392.     height: 17px;
  1393.     width: 180px;
  1394.     top: 90px;
  1395.     left: 50px;
  1396.     text-align: center;
  1397. }
  1398.  
  1399. .nes .p0:after {
  1400.     content: 'Player 1';
  1401. }
  1402.  
  1403. .nes .p1:after {
  1404.     content: 'Player 2';
  1405. }
  1406.  
  1407. .nes .p2:after {
  1408.     content: 'Player 3';
  1409. }
  1410.  
  1411. .nes .p3:after {
  1412.     content: 'Player 4';
  1413. }
  1414.  
  1415. .nes .arrows {
  1416.     position: absolute;
  1417.     width: 189px;
  1418.     height: 22px;
  1419.     top: 251px;
  1420.     left: 288px;
  1421. }
  1422.  
  1423. .nes .back, .nes .start {
  1424.     background: url(nes-assets/menu.png);
  1425.     width: 73px;
  1426.     height: 20px;
  1427. }
  1428.  
  1429. .nes .back.pressed, .nes .start.pressed {
  1430.     background-position-y: -21px;
  1431.     margin-top: 4px;
  1432. }
  1433.  
  1434. .nes .back {
  1435.     float: left;
  1436. }
  1437.  
  1438. .nes .start {
  1439.     float: right;
  1440. }
  1441.  
  1442. .nes .abxy {
  1443.     position: absolute;
  1444.     width: 180px;
  1445.     height: 74px;
  1446.     top: 223px;
  1447.     left: 570px;
  1448. }
  1449.  
  1450. .nes .button {
  1451.     position: absolute;
  1452.     width: 74px;
  1453.     height: 74px;
  1454.     background: url(nes-assets/buttons.png);
  1455.     top: 0;
  1456. }
  1457.  
  1458. .nes .button.pressed {
  1459.     background-position-y: -77px;
  1460.     margin-top: 5px;
  1461. }
  1462.  
  1463. .nes .a {
  1464.     right: 0;
  1465. }
  1466.  
  1467. .nes .b {
  1468.     left: 0px;
  1469. }
  1470.  
  1471. .nes .x, .nes .y {
  1472.     display: none;
  1473. }
  1474.  
  1475. .nes .dpad {
  1476.     position: absolute;
  1477.     width: 135px;
  1478.     height: 131px;
  1479.     top: 142px;
  1480.     left: 65px;
  1481. }
  1482.  
  1483. .nes .face {
  1484.     background: url(nes-assets/dpad.png);
  1485.     position: absolute;
  1486.     width: 38px;
  1487.     height: 38px;
  1488. }
  1489.  
  1490. .nes .face.up, .nes .face.down {
  1491.     left: 50px;
  1492. }
  1493.  
  1494. .nes .face.left, .nes .face.right {
  1495.     top: 49px;
  1496. }
  1497.  
  1498. .nes .face.up {
  1499.     top: 0;
  1500.     background-position: 111px 0px;
  1501. }
  1502.  
  1503. .nes .face.down {
  1504.     top: 98px;
  1505.     background-position: 75px 0;
  1506. }
  1507.  
  1508. .nes .face.left {
  1509.     left: 0;
  1510.     background-position: 0px 0;
  1511. }
  1512.  
  1513. .nes .face.right {
  1514.     right: 0px;
  1515.     background-position: 39px 0;
  1516. }
  1517.  
  1518. .nes .face.pressed {
  1519.     background-position-y: 38px;
  1520. }
  1521.  
  1522. .nes.half {
  1523.     margin-top: -195px;
  1524. }
  1525.  
  1526. /*END NES Controller Styling*/
  1527.  
  1528. /*BEGIN FightPad Pro Controller Styling*/
  1529. .controller.fpp {
  1530.     background: url(fpp-assets/base.svg) center;
  1531.     height: 755px;
  1532.     width: 938px;
  1533. }
  1534.  
  1535. .fpp.disconnected {
  1536.     background: url(fpp-assets/base-disconnect.svg) no-repeat;
  1537. }
  1538.  
  1539. .fpp.disconnected div {
  1540.     display: none;
  1541. }
  1542.  
  1543. .fpp .triggers {
  1544.     width: 684px;
  1545.     height: 104px;
  1546.     position: absolute;
  1547.     left: 145px;
  1548. }
  1549.  
  1550. .fpp .trigger {
  1551.     width: 96px;
  1552.     height: 104px;
  1553.     background: url(fpp-assets/triggers.svg) no-repeat;
  1554.     opacity: 0;
  1555. }
  1556.  
  1557. .fpp .trigger.left {
  1558.     float: left;
  1559. }
  1560.  
  1561. .fpp .trigger.right {
  1562.     float: right;
  1563.     background-position-x: -98px
  1564. }
  1565.  
  1566. .fpp .bumpers {
  1567.     position: absolute;
  1568.     width: 816px;
  1569.     height: 76px;
  1570.     left: 65px;
  1571.     top: 115px;
  1572. }
  1573.  
  1574. .fpp .bumper {
  1575.     width: 221px;
  1576.     height: 75px;
  1577.     background: url(fpp-assets/bumpers.svg);
  1578.     opacity: 0;
  1579. }
  1580.  
  1581. .fpp .bumper.pressed {
  1582.     opacity: 1;
  1583. }
  1584.  
  1585. .fpp .bumper.left {
  1586.     float: left;
  1587. }
  1588.  
  1589. .fpp .bumper.right {
  1590.     background-position-x: -223px;
  1591.     float: right;
  1592. }
  1593.  
  1594. .fpp .bumper.right:after {
  1595.     content: "";
  1596.     position: absolute;
  1597.     background: url(fpp-assets/buttons.svg) no-repeat;
  1598.     background-position: -280px 0px;
  1599.     width: 70px;
  1600.     height: 70px;
  1601.     top: 121px;
  1602.     right: 41px;
  1603. }
  1604.  
  1605. .fpp .quadrant {
  1606.     position: absolute;
  1607.     background: url(fpp-assets/quadrant.svg) no-repeat;
  1608.     height: 46px;
  1609.     width: 152px;
  1610.     top: 365px;
  1611.     left: 347px;
  1612. }
  1613.  
  1614. .fpp .p0 {
  1615.     background-position: -6px 0;
  1616. }
  1617.  
  1618. .fpp .p1 {
  1619.     background-position: -160px 0;
  1620. }
  1621.  
  1622. .fpp .p2 {
  1623.     background-position: -317px 0;
  1624. }
  1625.  
  1626. .fpp .p3 {
  1627.     background-position: -474px 0;
  1628. }
  1629.  
  1630. .fpp .arrows {
  1631.     position: absolute;
  1632.     width: 175px;
  1633.     height: 43px;
  1634.     top: 550px;
  1635.     left: 480px;
  1636. }
  1637.  
  1638. .fpp .arrows:before {
  1639.     content: "";
  1640.     position: absolute;
  1641.     width: 55px;
  1642.     height: 22px;
  1643.     background: url(fpp-assets/slider.svg) no-repeat;
  1644.     left: -126px;
  1645. }
  1646.  
  1647. .fpp .back.pressed, .fpp .start.pressed {
  1648.     background: url(fpp-assets/options.svg) no-repeat;
  1649.     width: 81px;
  1650.     height: 43px;
  1651. }
  1652.  
  1653. .fpp .start.pressed {
  1654.     background-position-x: -83px;
  1655. }
  1656.  
  1657. .fpp .back {
  1658.     float: left;
  1659. }
  1660.  
  1661. .fpp .start {
  1662.     transform: translateX(-29px);
  1663.     float: right;
  1664. }
  1665.  
  1666. .fpp .abxy {
  1667.     position: absolute;
  1668.     width: 201px;
  1669.     height: 205px;
  1670.     top: 235px;
  1671.     left: 600px;
  1672. }
  1673.  
  1674. .fpp .trigger-button.right.pressed {
  1675.     position: absolute;
  1676.     width: 70px;
  1677.     height: 70px;
  1678.     background: url(fpp-assets/buttons.svg) no-repeat;
  1679.     background-position: -351px 0;
  1680.     right: -66px;
  1681.     top: 304px;
  1682. }
  1683.  
  1684. .fpp .button {
  1685.     position: absolute;
  1686.     width: 70px;
  1687.     height: 70px;
  1688.     background: url(fpp-assets/buttons.svg) no-repeat;
  1689.     opacity: 0;
  1690. }
  1691.  
  1692. .fpp .button.pressed {
  1693.     opacity: 1;
  1694. }
  1695.  
  1696. .fpp .a {
  1697.     background-position: 0 0;
  1698.     top: 135px;
  1699.     left: 57px;
  1700. }
  1701.  
  1702. .fpp .b {
  1703.     background-position: -70px 0;
  1704.     top: 79px;
  1705.     right: 0px;
  1706. }
  1707.  
  1708. .fpp .x {
  1709.     background-position: -140px 0;
  1710.     top: 67px;
  1711. }
  1712.  
  1713. .fpp .y {
  1714.     background-position: -210px 0;
  1715.     left: 75px;
  1716.     top: 11px;
  1717. }
  1718.  
  1719. .fpp .sticks {
  1720.     position: absolute;
  1721.     width: 114px;
  1722.     height: 114px;
  1723.     top: 386px;
  1724.     left: 215px;
  1725. }
  1726.  
  1727. .fpp .stick {
  1728.     position: absolute;
  1729.     background: url(fpp-assets/sticks.svg) no-repeat;
  1730.     height: 114px;
  1731.     width: 114px;
  1732. }
  1733.  
  1734. .fpp .stick.pressed.left {
  1735.     background-position-x: -115px;
  1736. }
  1737.  
  1738. .fpp .stick.pressed.right {
  1739.     background-position-x: -229px;
  1740. }
  1741.  
  1742. .fpp .stick.left {
  1743.     top: 0;
  1744.     left: 0;
  1745. }
  1746.  
  1747. .fpp .stick.right {
  1748.     display: none;
  1749.     top: 0;
  1750.     left: 0;
  1751. }
  1752.  
  1753. .fpp .dpad {
  1754.     position: absolute;
  1755.     width: 157px;
  1756.     height: 156px;
  1757.     top: 242px;
  1758.     left: 69px;
  1759. }
  1760.  
  1761. .fpp .face {
  1762.     background: url(fpp-assets/dpad.svg) no-repeat;
  1763.     position: absolute;
  1764.     opacity: 0;
  1765. }
  1766.  
  1767. .fpp .face.pressed {
  1768.     opacity: 1;
  1769. }
  1770.  
  1771. .fpp .face.up, .fpp .face.down {
  1772.     width: 110px;
  1773.     height: 78px;
  1774. }
  1775.  
  1776. .fpp .face.left, .fpp .face.right {
  1777.     width: 78px;
  1778.     height: 111px;
  1779. }
  1780.  
  1781. .fpp .face.up {
  1782.     left: 23px;
  1783.     top: 0;
  1784.     background-position: 0 0px;
  1785. }
  1786.  
  1787. .fpp .face.down {
  1788.     left: 23px;
  1789.     bottom: 2px;
  1790.     background-position: -111px 0;
  1791. }
  1792.  
  1793. .fpp .face.left {
  1794.     top: 22px;
  1795.     left: 1px;
  1796.     background-position: -222px 0;
  1797. }
  1798.  
  1799. .fpp .face.right {
  1800.     top: 22px;
  1801.     right: 0px;
  1802.     background-position: -303px 0;
  1803. }
  1804.  
  1805. /*END FightPad Pro Controller Styling*/
  1806. /*BEGIN Fight Stick Controller Styling*/
  1807. .controller.fight-stick {
  1808.     background: url(stick-assets/base.svg) center no-repeat;
  1809.     height: 534px;
  1810.     width: 1122px;
  1811. }
  1812.  
  1813. .fight-stick.disconnected {
  1814.     background: url(stick-assets/disconnected.svg) no-repeat;
  1815. }
  1816.  
  1817. .fight-stick.disconnected div {
  1818.     display: none;
  1819. }
  1820.  
  1821. .fight-stick .triggers {
  1822.     width: 326px;
  1823.     height: 198px;
  1824.     position: absolute;
  1825.     right: 0px;
  1826.     bottom: 66px;
  1827. }
  1828.  
  1829. .fight-stick .trigger-button {
  1830.     width: 123px;
  1831.     height: 123px;
  1832.     background: #333333;
  1833.     border-radius: 100%;
  1834.     opacity: 1;
  1835.     display: block;
  1836. }
  1837.  
  1838. .fight-stick .trigger-button.pressed {
  1839.     transform: translateY(5px);
  1840.     -webkit-filter: invert(1);
  1841. }
  1842.  
  1843. .fight-stick .trigger-button.left {
  1844.     position: absolute;
  1845.     float: right;
  1846.     bottom: 4px;
  1847.     right: 42px;
  1848. }
  1849.  
  1850. .fight-stick .trigger-button.right {
  1851.     float: left;
  1852. }
  1853.  
  1854. .fight-stick .bumpers {
  1855.     width: 295px;
  1856.     height: 198px;
  1857.     position: absolute;
  1858.     right: 0px;
  1859.     top: 88px;
  1860. }
  1861.  
  1862. .fight-stick .bumper {
  1863.     width: 123px;
  1864.     height: 123px;
  1865.     background: #333333;
  1866.     border-radius: 100%;
  1867.     opacity: 1;
  1868.     display: block;
  1869. }
  1870.  
  1871. .fight-stick .bumper.pressed {
  1872.     transform: translateY(5px);
  1873.     -webkit-filter: invert(1);
  1874. }
  1875.  
  1876. .fight-stick .bumper.left {
  1877.     position: absolute;
  1878.     float: right;
  1879.     bottom: 4px;
  1880.     right: 11px;
  1881. }
  1882.  
  1883. .fight-stick .bumper.right {
  1884.     float: left;
  1885. }
  1886.  
  1887. .fight-stick .quadrant {
  1888.     position: absolute;
  1889.     font-family: "Press Start 2P";
  1890.     font-size: 28px;
  1891.     font-weight: normal;
  1892.     top: 20px;
  1893.     left: 236px;
  1894.     color: white;
  1895. }
  1896.  
  1897. .fight-stick .p0:after {
  1898.     content: "Player 1";
  1899. }
  1900.  
  1901. .fight-stick .p1:after {
  1902.     content: "Player 2";
  1903. }
  1904.  
  1905. .fight-stick .p2:after {
  1906.     content: "Player 3";
  1907. }
  1908.  
  1909. .fight-stick .p3:after {
  1910.     content: "Player 4";
  1911. }
  1912.  
  1913. .fight-stick .arrows {
  1914.     position: absolute;
  1915.     width: 70px;
  1916.     height: 217px;
  1917.     top: 53px;
  1918.     left: 49px;
  1919. }
  1920.  
  1921. .fight-stick .back, .fight-stick .start {
  1922.     width: 70px;
  1923.     height: 70px;
  1924.     background: #333333;
  1925.     display: block;
  1926.     border-radius: 100%;
  1927. }
  1928.  
  1929. .fight-stick .back {
  1930.     float: left;
  1931. }
  1932.  
  1933. .fight-stick .start {
  1934.     position: absolute;
  1935.     bottom: 4px;
  1936.     left: -1px;
  1937. }
  1938.  
  1939. .fight-stick .back.pressed, .fight-stick .start.pressed {
  1940.     transform: translateY(5px);
  1941.     -webkit-filter: invert(1);
  1942. }
  1943.  
  1944. .fight-stick .abxy {
  1945.     position: absolute;
  1946.     width: 310px;
  1947.     height: 370px;
  1948.     bottom: 103px;
  1949.     left: 472px;
  1950. }
  1951.  
  1952. .fight-stick .button {
  1953.     width: 123px;
  1954.     height: 123px;
  1955.     background: #333333;
  1956.     border-radius: 100%;
  1957.     opacity: 1;
  1958.     display: block;
  1959.     position: absolute;
  1960. }
  1961.  
  1962. .fight-stick .button.pressed {
  1963.     transform: translateY(5px);
  1964.     -webkit-filter: invert(1);
  1965. }
  1966.  
  1967. .fight-stick .a {
  1968.     bottom: 0px;
  1969.     left: 0px;
  1970. }
  1971.  
  1972. .fight-stick .b {
  1973.     bottom: 66px;
  1974.     right: 31px;
  1975. }
  1976.  
  1977. .fight-stick .x {
  1978.     top: 66px;
  1979.     left: 33px
  1980. }
  1981.  
  1982. .fight-stick .y {
  1983.     right: 0px;
  1984.     top: 0px;
  1985. }
  1986.  
  1987. .fight-stick .fstick {
  1988.     position: absolute;
  1989.     width: 221px;
  1990.     height: 221px;
  1991.     top: 199px;
  1992.     left: 192px;
  1993.     background: url(stick-assets/stick.svg)
  1994. }
  1995.  
  1996. .fight-stick .fstick.up {
  1997.     background-position-x: -1762px;
  1998. }
  1999.  
  2000. .fight-stick .fstick.down {
  2001.     background-position-x: -882px;
  2002. }
  2003.  
  2004. .fight-stick .fstick.left {
  2005.     background-position-x: -1322px;
  2006. }
  2007.  
  2008. .fight-stick .fstick.right {
  2009.     background-position-x: -442px;
  2010. }
  2011.  
  2012. .fight-stick .fstick.up.right {
  2013.     background-position-x: -222px;
  2014. }
  2015.  
  2016. .fight-stick .fstick.up.left {
  2017.     background-position-x: -1542px;
  2018. }
  2019.  
  2020. .fight-stick .fstick.down.right {
  2021.     background-position-x: -662px;
  2022. }
  2023.  
  2024. .fight-stick .fstick.down.left {
  2025.     background-position-x: -1102px;
  2026. }
  2027.  
  2028. /*END Fight Stick Controller Styling*/
  2029.  
  2030. /*BEGIN GameCube Controller Styling*/
  2031. .controller.gc {
  2032.     background: url(gc-assets/base.svg) no-repeat;
  2033.     height: 837px;
  2034.     width: 978px;
  2035. }
  2036.  
  2037. .gc.disconnected {
  2038.     background: url(gc-assets/disconnected.svg) no-repeat;
  2039. }
  2040.  
  2041. .gc.disconnected div {
  2042.     display: none;
  2043. }
  2044.  
  2045. .gc .triggers {
  2046.     width: 775px;
  2047.     height: 95px;
  2048.     position: absolute;
  2049.     left: 102px;
  2050. }
  2051.  
  2052. .gc .trigger {
  2053.     width: 131px;
  2054.     height: 100%;
  2055.     background: url(gc-assets/trigger.svg);
  2056.     opacity: 0;
  2057. }
  2058.  
  2059. .gc .trigger.left {
  2060.     float: left;
  2061. }
  2062.  
  2063. .gc .trigger.right {
  2064.     float: right;
  2065. }
  2066.  
  2067. .gc .bumper {
  2068.     width: 158px;
  2069.     height: 100%;
  2070.     background: url(gc-assets/buttons.svg) no-repeat;
  2071.     background-position: -358px 0px;
  2072.     opacity: 0;
  2073. }
  2074.  
  2075. .gc .bumpers {
  2076.     position: absolute;
  2077.     width: 792px;
  2078.     height: 73px;
  2079.     left: 103px;
  2080.     top: 138px;
  2081. }
  2082.  
  2083. .gc .bumper.pressed {
  2084.     opacity: 1;
  2085. }
  2086.  
  2087. .gc .bumper.left {
  2088.     /* -webkit-transform: rotateY(180deg); */
  2089.     /* transform: rotateY(180deg); */
  2090.     float: left;
  2091.     display: none;
  2092. }
  2093.  
  2094. .gc .bumper.right {
  2095.     float: right;
  2096. }
  2097.  
  2098. /*Not needed, but I like keeping them here for posterity*/
  2099. /*.gc .quadrant{
  2100. position: absolute;
  2101. background: url(gc-assets/player-n.svg);
  2102. height: 17px;
  2103. width: 111px;
  2104. top: 140px;
  2105. left: 240px;
  2106. }
  2107. .gc .p0{
  2108. background-position: 0 -6px;
  2109. }
  2110. .gc .p1{
  2111. background-position: 0 -28px;
  2112. }
  2113. .gc .p2{
  2114. background-position: 0 -49px;
  2115. }
  2116. .gc .p3{
  2117. background-position: 0 -70px;
  2118. }*/
  2119.  
  2120. .gc .arrows {
  2121.     position: absolute;
  2122.     width: 50px;
  2123.     height: 50px;
  2124.     top: 324px;
  2125.     left: 465px;
  2126. }
  2127.  
  2128. .gc .back, .gc .start {
  2129.     width: 43px;
  2130.     height: 43px;
  2131.     background: #E7E7E7;
  2132.     border-radius: 100%;
  2133.     border: solid 4.5px rgba(0, 0, 0, .65);
  2134.     background-clip: content-box;
  2135.     opacity: 0;
  2136. }
  2137.  
  2138. .gc .back.pressed, .gc .start.pressed {
  2139.     opacity: 1;
  2140.     filter: invert(1);
  2141.     -webkit-filter: invert(1);
  2142. }
  2143.  
  2144. .gc .back {
  2145.     display: none;
  2146. }
  2147.  
  2148. .gc .start {
  2149.     float: right;
  2150. }
  2151.  
  2152. .gc .abxy {
  2153.     position: absolute;
  2154.     width: 288px;
  2155.     height: 230px;
  2156.     top: 207px;
  2157.     left: 640px;
  2158. }
  2159.  
  2160. .gc .button {
  2161.     position: absolute;
  2162.     background: url(gc-assets/buttons.svg);
  2163.     opacity: 0;
  2164. }
  2165.  
  2166. .gc .button.pressed {
  2167.     opacity: 1;
  2168. }
  2169.  
  2170. .gc .a {
  2171.     background-position: 0 0;
  2172.     width: 114px;
  2173.     height: 114px;
  2174.     bottom: 35px;
  2175.     left: 91px;
  2176. }
  2177.  
  2178. .gc .b {
  2179.     width: 71px;
  2180.     height: 71px;
  2181.     background-position: -116px 0;
  2182.     bottom: 0px;
  2183.     left: 1px;
  2184. }
  2185.  
  2186. .gc .x {
  2187.     width: 66px;
  2188.     height: 103px;
  2189.     background-position: -292px 0;
  2190.     top: 65px;
  2191.     right: 0px;
  2192. }
  2193.  
  2194. .gc .y {
  2195.     width: 103px;
  2196.     height: 66px;
  2197.     background-position: -189px 0;
  2198.     left: 67px;
  2199.     top: 2px;
  2200. }
  2201.  
  2202. .gc .sticks {
  2203.     position: absolute;
  2204.     width: 628px;
  2205.     height: 392px;
  2206.     top: 258px;
  2207.     left: 106px;
  2208. }
  2209.  
  2210. .gc .stick {
  2211.     position: absolute;
  2212. }
  2213.  
  2214. .gc .stick.left {
  2215.     top: 24px;
  2216.     left: 23px;
  2217.     background: url(gc-assets/left-stick.svg) center no-repeat;
  2218.     height: 121px;
  2219.     width: 121px;
  2220. }
  2221.  
  2222. .gc .stick.right {
  2223.     top: calc(100% - 127px);
  2224.     left: calc(100% - 125px);
  2225.     background: url(gc-assets/cstick.svg) center no-repeat;
  2226.     width: 84px;
  2227.     height: 84px;
  2228. }
  2229.  
  2230. .gc .dpad {
  2231.     position: absolute;
  2232.     width: 125px;
  2233.     height: 126px;
  2234.     top: 181px;
  2235.     left: 92px;
  2236. }
  2237.  
  2238. .gc .dpad {
  2239.     position: absolute;
  2240.     width: 130px;
  2241.     height: 130px;
  2242.     top: 497px;
  2243.     left: 263px;
  2244. }
  2245.  
  2246. .gc .face {
  2247.     background: url(gc-assets/dpad.svg) no-repeat;
  2248.     position: absolute;
  2249.     opacity: 0;
  2250. }
  2251.  
  2252. .gc .face.up, .gc .face.down {
  2253.     width: 44px;
  2254.     height: 65px;
  2255. }
  2256.  
  2257. .gc .face.left, .gc .face.right {
  2258.     width: 65px;
  2259.     height: 44px;
  2260. }
  2261.  
  2262. .gc .face.up {
  2263.     left: 42px;
  2264.     top: 0;
  2265.     background-position: 0px 0px;
  2266. }
  2267.  
  2268. .gc .face.down {
  2269.     left: 42px;
  2270.     bottom: 0;
  2271.     background-position: -46px 0;
  2272. }
  2273.  
  2274. .gc .face.left {
  2275.     top: 43px;
  2276.     left: 0;
  2277.     background-position: -93px 0;
  2278. }
  2279.  
  2280. .gc .face.right {
  2281.     top: 43px;
  2282.     right: 0px;
  2283.     background-position: -160px 0;
  2284. }
  2285.  
  2286. .gc .face.pressed {
  2287.     opacity: 1;
  2288. }
  2289.  
  2290. /*END GameCube Controller Styling*/
  2291.  
  2292. /*Start N64 Styling*/
  2293. .controller.n64 {
  2294.     background: url(n64-assets/base.svg);
  2295.     height: 851px;
  2296.     width: 810px;
  2297. }
  2298.  
  2299. .n64 .bumpers{
  2300.     position: absolute;
  2301.     height: 100px;
  2302.     width: 664px;
  2303.     top: 140px;
  2304.     left: 73px
  2305. }
  2306.  
  2307. .n64 .bumper{
  2308.     background: url(n64-assets/buttons.svg);
  2309.     height: 68px;
  2310.     width: 174px;
  2311.     display: block;
  2312.     position: absolute;
  2313. }
  2314.  
  2315. .n64 .bumper.right{
  2316.     right: 0;
  2317.     transform: rotateY(180deg);
  2318. }
  2319.  
  2320. .n64 .triggers{
  2321.     position: absolute;
  2322.     left: 379px;
  2323. }
  2324.  
  2325. .n64 .trigger.left{
  2326.     width: 52px;
  2327.     height: 88px;
  2328.     background: url(n64-assets/buttons.svg);
  2329.     display: block;
  2330.     background-position-y: -72px;
  2331. }
  2332.  
  2333. .n64 .dpad{
  2334.     width: 150px;
  2335.     height: 150px;
  2336.     /*     background: #FF00008F; */
  2337.     position: absolute;
  2338.     top: 281px;
  2339.     left: 106px;
  2340. }
  2341.  
  2342. .n64 .dpad .face{
  2343.     background: url(n64-assets/buttons.svg);
  2344.     height: 64px;
  2345.     width: 44px;
  2346.     background-position-y: -164px;
  2347.     display: block;
  2348.     position: absolute
  2349. }
  2350.  
  2351. .n64 .dpad .face.up{
  2352.     left: 32px
  2353. }
  2354.  
  2355.  
  2356. .n64 .dpad .face.down{
  2357.     transform: rotate(180deg);
  2358.     left: 32px;
  2359.     top: 65px
  2360. }
  2361.  
  2362. .n64 .dpad .face.left{
  2363.     transform: rotate(-90deg);
  2364.     top: 33px
  2365. }
  2366.  
  2367. .n64 .dpad .face.right{
  2368.     transform: rotate(90deg);
  2369.     top: 33px;
  2370.     left: 64px;
  2371. }
  2372.  
  2373. /* We're using the node used for a controller's system button here */
  2374. .n64 .meta{
  2375.     background: url(n64-assets/buttons.svg);
  2376.     width: 55px;
  2377.     height: 55px;
  2378.     background-position-y: -282px;
  2379.     position: absolute;
  2380.     left: 377px;
  2381.     top: 344px
  2382. }
  2383.  
  2384. .n64 .abxy{
  2385.     position: absolute;
  2386.     top: 245px;
  2387.     left: 609px
  2388. }
  2389.  
  2390. .n64 .abxy .button{
  2391.     background: url(n64-assets/buttons.svg);
  2392.     width: 47px;
  2393.     height: 47px;
  2394.     background-position-y: -231px;
  2395.     display: block;
  2396.     position: absolute;
  2397. }
  2398.  
  2399. .n64 .abxy .button.a{
  2400.     left: 45px
  2401. }
  2402.  
  2403. .n64 .abxy .button.b{
  2404.     left: 44px;
  2405.     top: 92px;
  2406.     transform: rotate(180deg);
  2407. }
  2408.  
  2409. .n64 .abxy .button.x{
  2410.     top: 45px;
  2411.     left: -2px;
  2412.     transform: rotate(-90deg)
  2413. }
  2414.  
  2415. .n64 .abxy .button.y{
  2416.     left: 91px;
  2417.     top: 46px;
  2418.     transform: rotate(90deg);
  2419. }
  2420.  
  2421. .n64 .arrows{
  2422.     position: absolute;
  2423.     top: 335px;
  2424.     left: 529px
  2425. }
  2426.  
  2427. .n64 .back, .n64 .start{
  2428.     background: url(n64-assets/buttons.svg);
  2429.     width: 61px;
  2430.     height: 61px;
  2431.     background-position-y: -341px;
  2432.     display: block;
  2433.     position: relative;
  2434. }
  2435.  
  2436. .n64 .start{
  2437.     background-position-y: -405px;
  2438.     top: -5px;
  2439.     left: 56px
  2440. }
  2441.  
  2442. .n64 .sticks{
  2443.     position: absolute;
  2444.     top: 493px;
  2445.     left: 369px;
  2446. }
  2447.  
  2448. .n64 .stick.left{
  2449.     background: url(n64-assets/buttons.svg);
  2450.     width: 73px;
  2451.     height: 73px;
  2452.     display: block;
  2453.     background-position-y: 73px
  2454. }
  2455.  
  2456. .n64 .button,
  2457. .n64 .face,
  2458. .n64 .meta,
  2459. .n64 .bumper,
  2460. .n64 .trigger,
  2461. .n64 .arrows *{
  2462.     opacity: 0
  2463. }
  2464.  
  2465. .n64 .pressed{
  2466.     opacity: 1
  2467. }
  2468. /*END N64 Styling*/
  2469.  
  2470. /*Navbar Elements & their inner contents*/
  2471. .navbar {
  2472.     height: 50px;
  2473.     background: cornflowerblue;
  2474.     border-bottom: 1px solid #5570b8;
  2475.     color: white;
  2476.     width: 100%;
  2477.     z-index: 10;
  2478.     position: absolute;
  2479.     top: 0;
  2480.     text-align: center;
  2481. }
  2482.  
  2483. .nocon {
  2484.     background: indianred;
  2485.     border-bottom: none;
  2486.     border-top: 1px solid #FF7474;
  2487.     bottom: 0;
  2488.     top: auto;
  2489. }
  2490.  
  2491. .nocon.visible, .pselect.visible {
  2492.     visibility: visible;
  2493.     opacity: 1;
  2494. }
  2495.  
  2496. .nocon ul {
  2497.     float: left;
  2498.     display: inline-block;
  2499. }
  2500.  
  2501. .navbar .content {
  2502.     font-size: 25px;
  2503.     width: 960px;
  2504.     display: flex;
  2505.     margin: 0 auto;
  2506.     line-height: 50px;
  2507.     justify-content: space-between;
  2508. }
  2509.  
  2510. /*.navbar .content .left {
  2511.     float: left;
  2512. }
  2513.  
  2514. .navbar .content .right {
  2515.     float: right;
  2516. }*/
  2517.  
  2518. .right a.button {
  2519.     top: 0;
  2520.     background: #FF9900;
  2521.     box-sizing: border-box;
  2522.     padding: 5px;
  2523.     display: inline-block;
  2524.     line-height: normal;
  2525.     text-decoration: none;
  2526.     color: rgba(0, 0, 0, 0.74);
  2527.     border-radius: 3px;
  2528.     margin: 4px;
  2529. }
  2530.  
  2531. .navbar .content .center {
  2532.     display: flex;
  2533. }
  2534.  
  2535. .pselect, .nocon {
  2536.     visibility: hidden;
  2537.     opacity: 0;
  2538.     transition: .5s ease;
  2539. }
  2540.  
  2541. .tooltip {
  2542.     display: inline;
  2543.     position: relative;
  2544. }
  2545.  
  2546. .tooltip:after {
  2547.     bottom: 13px;
  2548.     color: rgb(255, 255, 255);
  2549.     content: attr(data-tooltip) '\279F';
  2550.     display: block;
  2551.     left: -240px;
  2552.     position: absolute;
  2553.     text-shadow: rgb(0, 0, 0) 0px 1px 0px;
  2554.     white-space: nowrap;
  2555.     font-size: 0.5em;
  2556.     text-align: right;
  2557.     line-height: 25px;
  2558.     animation: helptip 7s 1 forwards;
  2559.     -webkit-animation-delay: 4s;
  2560.     -moz-animation-delay: 4s;
  2561.     -o-animation-delay: 4s;
  2562.     animation-delay: 4s;
  2563. }
  2564.  
  2565. .box {
  2566.     display: inline-block;
  2567.     width: 50px;
  2568.     height: 50px;
  2569.     font-size: 30pt;
  2570.     font-weight: 700;
  2571.     float: left;
  2572. }
  2573.  
  2574. .box a, .box label {
  2575.     text-decoration: none;
  2576.     display: block;
  2577.     height: 50px;
  2578.     width: 50px;
  2579. }
  2580.  
  2581. /*.skins{*/
  2582. /*margin: 0 0 0 -4px;*/
  2583. /*}*/
  2584. /*.skins input{*/
  2585. /*display: none;*/
  2586. /*}*/
  2587. .console {
  2588.     padding: 9px;
  2589.     vertical-align: top;
  2590.     -webkit-appearance: none;
  2591.     -moz-appearance: none;
  2592.     height: 50px;
  2593.     border: none;
  2594.     font-size: 20px;
  2595.     width: 50px;
  2596.     color: transparent;
  2597.     outline: 0;
  2598.     -webkit-filter: invert(0.97);
  2599.     -moz-filter: invert(0.97);
  2600.     filter: invert(0.97);
  2601.     transition: .3s ease-out;
  2602.     cursor: pointer;
  2603. }
  2604.  
  2605. .console:hover {
  2606.     -webkit-filter: invert(0);
  2607.     -moz-filter: invert(0);
  2608.     filter: invert(0);
  2609. }
  2610.  
  2611. .console option {
  2612.     color: black;
  2613.     background: white;
  2614. }
  2615.  
  2616. .console.xbox, .console.xbox-old {
  2617.     background: url('icons/xbx.png') no-repeat center;
  2618. }
  2619.  
  2620. .console.ps, .console.ds4 {
  2621.     background: url('icons/psn.png') no-repeat center;
  2622. }
  2623.  
  2624. .console.nes {
  2625.     background: url('icons/nes.png') no-repeat center;
  2626. }
  2627.  
  2628. .console.fpp {
  2629.     background: url('icons/fpp.png') no-repeat center;
  2630. }
  2631.  
  2632. .console.fight-stick {
  2633.     background: url('icons/fight-stick.png') no-repeat center;
  2634. }
  2635.  
  2636. .console.gc {
  2637.     background: url('icons/gc.png') no-repeat center;
  2638. }
  2639.  
  2640. #color-picker {
  2641.     display: inline-block;
  2642.     width: 50px;
  2643.     color: whitesmoke;
  2644.     line-height: normal;
  2645. }
  2646.  
  2647. #color-picker i {
  2648.     font-size: 42px;
  2649.     transform: translateY(8%);
  2650. }
  2651.  
  2652. #color-picker-input {
  2653.     transform: scale(0);
  2654. }
  2655.  
  2656. /*.box.xbx, .box.psn{*/
  2657. /*background: #53BDFF;*/
  2658. /*}*/
  2659. /*.box.xbx label, .box.psn label{*/
  2660. /*color: #5570B8;*/
  2661. /*text-shadow: 0 1px 0 #90D4FF;*/
  2662. /*}*/
  2663. /*.box.psn label{*/
  2664. /*line-height: 55px;*/
  2665. /*font-size: 50px;*/
  2666. /*}*/
  2667. /*.box.xbx label{*/
  2668. /*font-size: 17px;*/
  2669. /*line-height: 53px;*/
  2670. /*}*/
  2671. /*.box.xbx label:hover, .box.xbx input:checked + label{*/
  2672. /*background: forestgreen;*/
  2673. /*color: white;*/
  2674. /*text-shadow: none;*/
  2675. /*}*/
  2676. /*.box.psn label:hover, .box.psn input:checked + label{*/
  2677. /*background: #252EAE;*/
  2678. /*color: white;*/
  2679. /*text-shadow: none;*/
  2680. /*}*/
  2681. span.code {
  2682.     border-radius: 2px;
  2683.     font-family: monospace;
  2684.     padding: 2px;
  2685.     background: lightgrey;
  2686.     color: black;
  2687. }
  2688.  
  2689. .box .fa {
  2690.     line-height: 50px;
  2691.     display: block;
  2692. }
  2693.  
  2694. .help {
  2695.     background: #53BDFF;
  2696.     text-shadow: 0 1px 0 #90D4FF;
  2697. }
  2698.  
  2699. .help a {
  2700.     color: #5570B8;
  2701. }
  2702.  
  2703. .thanks {
  2704.     background: darkorange;
  2705.     text-shadow: 0 1px 0 #FFC252;
  2706.     font-size: 28pt;
  2707. }
  2708.  
  2709. .thanks a {
  2710.     color: darkred;
  2711. }
  2712.  
  2713. .talk {
  2714.     background: #9750ed;
  2715.     text-shadow: 0 1px 0 #ba88e8;
  2716. }
  2717.  
  2718. .talk a {
  2719.     color: darkslateblue;
  2720. }
  2721.  
  2722. .code {
  2723.     background: #9750ed;
  2724.     text-shadow: 0 1px 0 #ba88e8;
  2725.     display: none;
  2726. }
  2727.  
  2728. .code a {
  2729.     color: darkslateblue;
  2730. }
  2731.  
  2732. .twitch {
  2733.     background: purple;
  2734.     text-shadow: 0 1px 0 #f5f2f5;
  2735. }
  2736.  
  2737. .twitch a {
  2738.     color: #e7e4e7;
  2739. }
  2740.  
  2741. .yt {
  2742.     background: red;
  2743.     text-shadow: 0 1px 0 #f5f2f5;
  2744. }
  2745.  
  2746. .yt a {
  2747.     color: #e7e4e7;
  2748. }
  2749.  
  2750. .alert span {
  2751.     color: #a85454;
  2752.     display: block;
  2753.     text-shadow: 0 1px 0 #ffa78b;
  2754.  
  2755. }
  2756.  
  2757. .hc {
  2758.     width: 960px;
  2759.     display: block;
  2760.     margin: 0 auto;
  2761.     -webkit-perspective: 1000;
  2762.     -moz-perspective: 1000;
  2763.     color: white;
  2764. }
  2765.  
  2766. .hc .content {
  2767.     background: royalblue;
  2768.     box-sizing: border-box;
  2769.     padding: 15px;
  2770. }
  2771.  
  2772. /*#help{
  2773.     -webkit-transform: rotateX(-100deg);
  2774.     -webkit-backface-visibility: hidden;
  2775.     -moz-transform: rotateX(-100deg);
  2776.     -moz-backface-visibility: hidden;
  2777.     -moz-transform-origin: top;
  2778.     transform: rotateX(-100deg);
  2779.     backface-visibility: hidden;
  2780.     transform-origin: top;
  2781.     -webkit-transform-origin: top;
  2782.     transition: transform .3s ease;
  2783.     transition: -webkit-transform .3s ease;
  2784.     visibility: hidden;
  2785.     position: absolute;
  2786.     margin: 0 auto;
  2787.  
  2788. }
  2789. #help:target{
  2790.     -webkit-transform: rotateX(0deg);
  2791.     -moz-transform: rotateX(0deg);
  2792.     transform: rotateX(0deg);
  2793.     transition: -webkit-transform 2s ease;
  2794.     transition: transform 2s ease;
  2795.     transform-origin: top;
  2796.     -moz-transform-origin: top;
  2797.     -webkit-transform-origin: top;
  2798.     visibility: visible;
  2799.     position: relative;
  2800.     margin: 0 auto;
  2801. }*/
  2802. .ac {
  2803.  
  2804. }
  2805.  
  2806. .title {
  2807.     width: 100%;
  2808.     line-height: normal;
  2809.     font-size: 40px;
  2810.     margin-bottom: 15px;
  2811. }
  2812.  
  2813. .title h1 {
  2814.     float: left;
  2815. }
  2816.  
  2817. .title .close {
  2818.     float: right;
  2819.     margin: 8px;
  2820. }
  2821.  
  2822. .title .close a {
  2823.     text-decoration: none;
  2824.     font-size: 19pt;
  2825.     width: 25px;
  2826.     height: 25px;
  2827.     display: inline-block;
  2828.     position: relative;
  2829.     top: 4px;
  2830.     line-height: 100%;
  2831.     background: red;
  2832.     text-align: center;
  2833.     border-radius: 25px;
  2834.     font-weight: 700;
  2835.     color: white;
  2836. }
  2837.  
  2838. .column {
  2839.     width: 30%;
  2840.     float: left;
  2841.     padding-right: 45px;
  2842. }
  2843.  
  2844. .column.last {
  2845.     padding: 0;
  2846. }
  2847.  
  2848. .overflow {
  2849.     position: fixed;
  2850.     width: 100%;
  2851.     top: 50px;
  2852.     z-index: 1;
  2853. }
  2854.  
  2855. .text {
  2856.     margin-bottom: 5px;
  2857. }
  2858.  
  2859. .text ol {
  2860.     display: block;
  2861.     list-style: decimal inside;
  2862. }
  2863.  
  2864. .text li {
  2865.     padding: 0 0px 5px 0px;
  2866. }
  2867.  
  2868. .changelog ul {
  2869.     list-style: disc inside;
  2870.     margin-left: 1em;
  2871.     text-indent: -1em;
  2872. }
  2873.  
  2874. .changelog ul li {
  2875.     padding: 4px 12px;
  2876. }
  2877.  
  2878. .log {
  2879.     margin-bottom: 5px;
  2880.     transition: opacity .4s ease-out;
  2881. }
  2882.  
  2883. .log:not(:first-child) {
  2884.     opacity: .5;
  2885. }
  2886.  
  2887. .log:hover {
  2888.     opacity: 1;
  2889. }
  2890.  
  2891. .log code {
  2892.     font-family: "Consolas", monospace;
  2893.     white-space: pre-line;
  2894. }
  2895.  
  2896. .player {
  2897.     background: white;
  2898.     padding: 9px;
  2899.     vertical-align: top;
  2900.     -webkit-appearance: none;
  2901.     -moz-appearance: none;
  2902.     height: 50px;
  2903.     border: none;
  2904.     font-size: 25px;
  2905.     outline: 0;
  2906.     cursor: pointer;
  2907. }
  2908.  
  2909. .ty {
  2910.     background: green;
  2911.     z-index: 11;
  2912.     display: none;
  2913.     border-bottom: 1px solid darkgreen;
  2914. }
  2915.  
  2916. .uc {
  2917.     background: orange;
  2918.     z-index: 11;
  2919.     border-bottom: 1px solid darkorange;
  2920.     display: none;
  2921. }
  2922.  
  2923. .update {
  2924.     background: darkred;
  2925.     z-index: 11;
  2926.     border-bottom: 1px solid rgb(125, 0, 0);
  2927.     display: none;
  2928. }
  2929.  
  2930. .message {
  2931.     display: block;
  2932.     -webkit-animation: messagefade 6s forwards;
  2933.     -moz-animation: messagefade 6s forwards;
  2934.     animation: messagefade 6s forwards;
  2935. }
  2936.  
  2937. .message span {
  2938.     width: 100%;
  2939. }
  2940.  
  2941. /*
  2942. Help Box Stuff
  2943. .changelog::-webkit-scrollbar
  2944. {
  2945.     width: 22px;  !* for vertical scrollbars *!
  2946.     height: 12px; !* for horizontal scrollbars *!
  2947. }
  2948.  
  2949. .changelog::-webkit-scrollbar-track
  2950. {
  2951.     !*background: rgba(0, 0, 0, 0.1);*!
  2952.     !*border-radius: 12px;*!
  2953.     !*box-shadow: inset 1px 1px 12px rgba(0, 0, 0, 0.28);*!
  2954. }
  2955.  
  2956. .changelog::-webkit-scrollbar-thumb
  2957. {
  2958.     background: linear-gradient(to right, rgba(54, 58, 65, 0.2) 0%,rgba(0,0,0,0.3) 100%);
  2959.     border-radius: 12px;
  2960.     border: 4px solid transparent;
  2961.     background-clip: padding-box;
  2962. }
  2963. */
  2964. /*.info {
  2965.     display: block;
  2966.     background: #75bbfd;
  2967.     font-size: 13pt;
  2968.     padding: 12px;
  2969.     vertical-align: text-bottom;
  2970.     color: black;
  2971. }
  2972. .info span:before {
  2973.     content: "INFO";
  2974.     padding: 2px 6px;
  2975.     border: solid #95d0fc 2px;
  2976.     margin: 0 6px 0 0;
  2977.     font-weight: 700;
  2978.     border-radius: 3px;
  2979. }
  2980. .warning {
  2981.     display: block;
  2982.     background: darkred;
  2983.     font-size: 13pt;
  2984.     padding: 12px;
  2985.     vertical-align: text-bottom;
  2986. }
  2987. .warning span:before {
  2988.     content: "WARNING";
  2989.     padding: 2px 6px;
  2990.     background: red;
  2991.     margin: 0 6px 0 0;
  2992.     font-weight: 700;
  2993.     border-radius: 3px;
  2994. }
  2995. .info span, .warning span {
  2996.     text-align: center;
  2997.     display: block;
  2998. }*/
  2999.  
  3000. /*CSS Slideout Menu*/
  3001. a .menu-button {
  3002.     color: white;
  3003.     font-size: 36px;
  3004.     vertical-align: text-bottom;
  3005.     -webkit-transform: scaleX(0.75);
  3006.     -moz-transform: scaleX(0.75);
  3007.     transform: scaleX(0.75);
  3008. }
  3009.  
  3010. a:active .menu-button {
  3011.     -webkit-filter: invert(100%);
  3012.     filter: invert(100%);
  3013. }
  3014.  
  3015. .slideout-menu {
  3016.     z-index: 13;
  3017.     position: absolute;
  3018.     width: 100%;
  3019.     height: 100%;
  3020.     visibility: hidden;
  3021.     transition: all .5s;
  3022.     transition-delay: .1s;
  3023.     transition-timing-function: cubic-bezier(0.27, 1.29, 0.63, 1);
  3024. }
  3025.  
  3026. .slideout-menu:target {
  3027.     visibility: visible;
  3028. }
  3029.  
  3030. .slideout-menu:target .menu {
  3031.     transform: translateX(0px);
  3032.     box-shadow: black -1px 0 10px;
  3033. }
  3034.  
  3035. .slideout-menu:target .modal-bg {
  3036.     transition-delay: 0s;
  3037.     transition-duration: .5s;
  3038. }
  3039.  
  3040. .menu {
  3041.     width: 400px;
  3042.     height: 100%;
  3043.     background: whitesmoke;
  3044.     position: absolute;
  3045.     transition: transform cubic-bezier(0.4, 0, 0.2, 1) .4s;
  3046.     transform: translateX(-400px);
  3047.     display: flex;
  3048.     flex-direction: column;
  3049. }
  3050.  
  3051. .yt-contain {
  3052.     position: relative;
  3053.     padding-bottom: 56.25%;
  3054.     height: 0;
  3055.     overflow: hidden;
  3056.  
  3057. }
  3058.  
  3059. .yt-contain iframe, .yt-contain object, .yt-contain embed {
  3060.     position: absolute;
  3061.     top: 0;
  3062.     left: 0;
  3063.     width: 100%;
  3064.     height: 100%;
  3065. }
  3066.  
  3067. /*Twitch Video Tooltip*/
  3068. /*.menu .yt-contain:before, .yt-contain:after{
  3069.     display: block;
  3070.     visibility: hidden;
  3071.     z-index: 10;
  3072.     position: fixed;
  3073.     white-space: pre-line;
  3074.     transform: translateX(-20px);
  3075.     transition: transform .3s ease-out, opacity .3s ease-out;
  3076.     opacity: 0;
  3077. }
  3078.  
  3079. .menu .yt-contain:hover:after, .yt-contain:hover:before{
  3080.     transform: translateX(-5px);
  3081.     visibility: visible;
  3082.     opacity: 1;
  3083. }
  3084. .menu .yt-contain:after {
  3085.     content: "Upsilon Pi Epsilon @ FIU is hosting a Super Smash Bros. tournament on Friday, October 28th at 6pm EST. \AHope to see you in chat!";
  3086.     width: 200px;
  3087.     text-align: center;
  3088.     padding: 8px 8px 8px 8px;
  3089.     color: whitesmoke;
  3090.     right: -240px;
  3091.     top: 120px;
  3092.     border-radius: 5px;
  3093.     background: rgba(0,0,0,.7);
  3094. }
  3095. .menu .yt-contain:before{
  3096.     content: "";
  3097.     width: 0px;
  3098.     height: 0;
  3099.     top: 160px;
  3100.     right: -24px;
  3101.     border-style: solid;
  3102.     border-width: 13px 15px 13px 0px;
  3103.     border-color: transparent rgba(0,0,0,.7) transparent transparent;
  3104.     box-sizing: border-box;
  3105. }*/
  3106.  
  3107.  
  3108. .menu ul {
  3109.     height: calc(100% - 50px);
  3110.     overflow-y: auto;
  3111. }
  3112.  
  3113. .menu .yt-contain + ul {
  3114.     height: calc(100% - 275px);
  3115. }
  3116.  
  3117. .menu a {
  3118.     /* vertical-align: baseline; */
  3119.     display: block;
  3120.     padding: 10px;
  3121.     font-size: 26px;
  3122.     text-decoration: none;
  3123.     color: rgba(0, 0, 0, 0.65);
  3124.     transition: background ease .5s;
  3125. }
  3126.  
  3127. .menu li span {
  3128.     vertical-align: top;
  3129. }
  3130.  
  3131. .menu i {
  3132.     font-size: 28px;
  3133.     margin-right: 4px;
  3134. }
  3135.  
  3136. .menu h1 {
  3137.  
  3138.     font-size: 30px;
  3139.     padding: 10px;
  3140.     background: darkred;
  3141.     color: floralwhite;
  3142.     padding-left: 64px;
  3143. }
  3144.  
  3145. .menu h1 i.material-icons {
  3146.     font-size: 48px;
  3147.     position: absolute;
  3148.     left: 10px;
  3149.     top: 2px;
  3150. }
  3151.  
  3152. .menu {
  3153.     /*position: relative;*/
  3154. }
  3155.  
  3156. .menu .divider {
  3157.     border-bottom: 1px solid gray;
  3158.     margin: 10px 50px;
  3159. }
  3160.  
  3161. .menu a:hover {
  3162.     background: rgba(0, 0, 0, 0.20);
  3163. }
  3164.  
  3165. /* CSS Modals */
  3166. .modal-container {
  3167.     /*background: rgba(0, 0, 0, 0);*/
  3168.     z-index: 13;
  3169.     position: absolute;
  3170.     width: 100%;
  3171.     height: 100%;
  3172.     visibility: hidden;
  3173.     transition: all .5s;
  3174.     transition-delay: .1s;
  3175.     transition-timing-function: cubic-bezier(0.27, 1.29, 0.63, 1);
  3176.     overflow: hidden;
  3177. }
  3178.  
  3179. .modal-container:target {
  3180.     visibility: visible;
  3181.     /*background: rgba(0, 0, 0, 0.61);*/
  3182. }
  3183.  
  3184. .modal-container:target .modal {
  3185.     opacity: 1;
  3186.     transform: scale(1) rotateX(0deg) translateY(0%);
  3187.     /*animation: modal-flow .5s;*/
  3188.     /*animation-timing-function: cubic-bezier(0.27, 1.29, 0.63, 1);*/
  3189.  
  3190. }
  3191.  
  3192. .modal-bg {
  3193.     background: rgba(0, 0, 0, 0);
  3194.     transition: all .5s cubic-bezier(0.27, 1.29, 0.63, 1) .1s;
  3195.     width: 100%;
  3196.     height: 100%;
  3197. }
  3198.  
  3199. .bglink {
  3200.     position: absolute;
  3201.     width: 100%;
  3202.     height: 100%;
  3203.     cursor: default;
  3204. }
  3205.  
  3206. .modal-container:target .modal-bg, .slideout-menu:target .modal-bg {
  3207.     background: rgba(0, 0, 0, 0.61);
  3208. }
  3209.  
  3210. .modal {
  3211.     width: 870px;
  3212.     /*height: calc(100% - 100px);*/
  3213.     max-height: calc(100% - 100px);
  3214.     min-height: 415px;
  3215.     display: flex;
  3216.     flex-flow: column;
  3217.     background: whitesmoke;
  3218.     margin: 40px auto 0 auto;
  3219.     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  3220.     opacity: 0;
  3221.     transform: scale(1.4) rotateX(60deg) translateY(-100%);
  3222.     transform-origin: center -70px;
  3223.     transition: all .7s cubic-bezier(0.27, 1.29, 0.63, 1) .1s, opacity 100ms ease .1s;
  3224.     /*animation: modal-flow .5s reverse;*/
  3225.     /*animation-timing-function: cubic-bezier(0.27, 1.29, 0.63, 1);*/
  3226. }
  3227.  
  3228. .modal article {
  3229.     -webkit-box-sizing: border-box;
  3230.     -moz-box-sizing: border-box;
  3231.     box-sizing: border-box;
  3232.     padding: 18px;
  3233.     overflow-y: auto;
  3234.     flex: 1 1 auto;
  3235. }
  3236.  
  3237. /* Unnecessary fix since this flexbox bug has been fixed
  3238.  
  3239. .modal article > :first-child {
  3240.     margin-top: 18px;
  3241. }
  3242.  
  3243. .modal article > :last-child {
  3244.     margin-bottom: 18px;
  3245. }*/
  3246.  
  3247. .modal h1 {
  3248.     font-size: 3em;
  3249. }
  3250.  
  3251. .modal a.close {
  3252.     float: right;
  3253.     display: inline-block;
  3254.     text-align: center;
  3255.     font-size: 3em;
  3256.     width: 1em;
  3257.     text-decoration: none;
  3258.     color: white;
  3259.     border-radius: 3em;
  3260.     text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 3px;
  3261. }
  3262.  
  3263. .modal a.close:active, .modal a.close:hover {
  3264.     -webkit-filter: invert(100%);
  3265.     filter: invert(100%);
  3266. }
  3267.  
  3268. .modal .codeblock {
  3269.     font-family: "Consolas", monospace;
  3270.     background: lightgrey;
  3271.     color: darkgoldenrod;
  3272.     word-wrap: break-word;
  3273.     border-radius: 5px;
  3274.     border: 1px solid hsla(0, 0%, 77%, 1);
  3275.     text-shadow: rgba(0, 0, 0, 0.44) 0 0 .1px;
  3276. }
  3277.  
  3278. .modal p {
  3279.     margin-bottom: 15px;
  3280. }
  3281.  
  3282. .modal .minimenu {
  3283.     position: absolute;
  3284.     width: 100%;
  3285.     box-sizing: border-box;
  3286.     background: rgba(0, 0, 0, 0.25);
  3287. }
  3288.  
  3289. .modal .minimenu li {
  3290.     height: 100%;
  3291.     display: table-cell;
  3292. }
  3293.  
  3294. .modal .minimenu li:hover, .modal .minimenu .selected {
  3295.     background: rgba(0, 0, 0, 0.25);
  3296. }
  3297.  
  3298. .modal .minimenu a {
  3299.     color: whitesmoke;
  3300.     padding: 7px 8px;
  3301.     text-decoration: none;
  3302.     display: inline-block;
  3303. }
  3304.  
  3305. .modal .minimenu + header {
  3306.     background: deepskyblue;
  3307.     -webkit-box-sizing: border-box;
  3308.     -moz-box-sizing: border-box;
  3309.     box-sizing: border-box;
  3310.     padding: 35px 2% 2%;
  3311.     flex: 0 0 100px;
  3312. }
  3313.  
  3314. #about .video {
  3315.     float: right;
  3316.     width: 50%;
  3317.     margin-left: 10px;
  3318. }
  3319.  
  3320. .info {
  3321.     clear: both;
  3322. }
  3323.  
  3324. .info div {
  3325.     width: 50%;
  3326.     box-sizing: border-box;
  3327. }
  3328.  
  3329. .info ol {
  3330.     list-style: decimal inside;
  3331. }
  3332.  
  3333. .info ol li {
  3334.     margin-bottom: 5px;
  3335. }
  3336.  
  3337. .info div:nth-of-type(1) {
  3338.     float: left;
  3339.     padding-right: 1%;
  3340.  
  3341. }
  3342.  
  3343. .info div:nth-of-type(2) {
  3344.     float: right;
  3345.     padding-left: 1%;
  3346. }
  3347.  
  3348. .form-group {
  3349.     margin-bottom: 8px;
  3350.     font-size: 32px;
  3351.     position: relative;
  3352. }
  3353.  
  3354. .form-group [id*=-input] {
  3355.     float: right;
  3356.     width: 535px;
  3357.     padding: 0px;
  3358.     border: none;
  3359.     background: transparent;
  3360.     border-bottom: rgba(0, 0, 0, 0.34) 1px solid;
  3361.     text-align: center;
  3362.     transition: border-bottom 0.2s ease-in;
  3363.     font-size: 29px;
  3364. }
  3365.  
  3366. .form-group [id*=-input]:focus {
  3367.     border-bottom: black 1px solid;
  3368.     outline: none;
  3369. }
  3370.  
  3371. #url-form .form-group [type=checkbox]:before {
  3372.     content: "Disabled";
  3373.     color: lightgray;
  3374.     display: block;
  3375.     position: absolute;
  3376.     cursor: pointer;
  3377.     width: 535px;
  3378.     text-align: center;
  3379.     background: rgba(255, 0, 0, .8);
  3380.     border-radius: 3px;
  3381.     right: -3px;
  3382. }
  3383.  
  3384. #url-form .form-group [type=checkbox]:checked:before {
  3385.     content: "Enabled";
  3386.     background: rgba(0, 110, 0, .8);
  3387. }
  3388.  
  3389. #url-form .form-group [type=checkbox] {
  3390.     width: 0;
  3391.     height: 0;
  3392.     position: relative;
  3393. }
  3394.  
  3395. #url-form .form-group .flipped[type=checkbox]:before {
  3396.     content: "Enabled";
  3397.     background: rgba(0, 110, 0, .8);
  3398. }
  3399.  
  3400. #url-form .form-group .flipped[type=checkbox]:checked:before {
  3401.     content: "Disabled";
  3402.     background: rgba(255, 0, 0, .8);
  3403. }
  3404.  
  3405. .form-group .input-unit {
  3406.     position: absolute;
  3407.     right: 0;
  3408. }
  3409.  
  3410. .form-group .input-unit + [id*=-input] {
  3411.     width: 474px;
  3412.     padding-right: 60px;
  3413. }
  3414.  
  3415. #docs h2 {
  3416.     margin-bottom: 15px;
  3417. }
  3418.  
  3419. #docs h2:after {
  3420.     content: attr(data-param);
  3421.     margin-left: 5px;
  3422.     padding: 3px;
  3423.     font-family: "Consolas", monospace;
  3424.     background: lightgrey;
  3425.     color: darkgoldenrod;
  3426.     word-wrap: break-word;
  3427.     border-radius: 5px;
  3428.     border: 1px solid hsla(0, 0%, 77%, 1);
  3429.     text-shadow: rgba(0, 0, 0, 0.44) 0 0 .1px;
  3430. }
  3431.  
  3432. #docs .definition, #docs .definition ul {
  3433.     margin-bottom: 15px;
  3434. }
  3435.  
  3436. #docs .definition ul li {
  3437.     margin-bottom: 4px;
  3438. }
  3439.  
  3440. #docs .definition div.codeblock {
  3441.     padding: 10px;
  3442.     margin-bottom: 15px;
  3443. }
  3444.  
  3445. #docs .definition li:before {
  3446.     content: '\2012';
  3447.     margin-right: 4px;
  3448. }
  3449.  
  3450. #docs .definition li:nth-child(1):before {
  3451.     content: "UNIT: ";
  3452.     font-weight: bold;
  3453. }
  3454.  
  3455. #docs .definition li:nth-child(2):before {
  3456.     content: "DEFAULT VALUE: ";
  3457.     font-weight: bold;
  3458. }
  3459.  
  3460. #docs .definition li:nth-child(3):before {
  3461.     content: "ACCEPTABLE VALUES: ";
  3462.     font-weight: bold;
  3463. }
  3464.  
  3465. .generator-container {
  3466.     margin-top: 18px;
  3467.     margin-bottom: 20px;
  3468. }
  3469.  
  3470. #generate-page {
  3471.     display: flex;
  3472.     flex-direction: column;
  3473.     gap: 20px;
  3474. }
  3475.  
  3476. #generate-area {
  3477.     display: flex;
  3478.     flex-direction: row;
  3479.     gap: 18px
  3480. }
  3481.  
  3482. #generated-url {
  3483.     font-size: 20pt;
  3484.     padding: 18px;
  3485.     cursor: pointer;
  3486.     display: inline-block;
  3487.     position: relative;
  3488.     width: 80%;
  3489. }
  3490.  
  3491. #url-generate-reset {
  3492.     font-size: 20pt;
  3493.     padding: 18px;
  3494.     cursor: pointer;
  3495. }
  3496.  
  3497. #url-generate-reset span {
  3498.     text-align: center;
  3499.     display: block;
  3500. }
  3501.  
  3502. /*Tooltip Stuff*/
  3503. #generated-url:before, #generated-url:after {
  3504.     display: block;
  3505.     position: absolute;
  3506.     font-size: 16px;
  3507.     font-family: 'Source Sans Pro', sans-serif;
  3508.     color: whitesmoke;
  3509.     transform: translatex(-50%);
  3510.     opacity: 0;
  3511.     transition: transform ease .3s, opacity ease .3s;
  3512.  
  3513. }
  3514.  
  3515. #generated-url:after {
  3516.     content: attr(data-message);
  3517.     padding: 8px;
  3518.     border-radius: 31px;
  3519.     left: 50%;
  3520.     bottom: -70px;
  3521.     background: black;
  3522. }
  3523.  
  3524. #generated-url:before {
  3525.     content: " ";
  3526.     border-left: transparent solid 9px;
  3527.     width: 0px;
  3528.     height: 0px;
  3529.     border-right: transparent solid 9px;
  3530.     border-bottom: rgb(0, 0, 0) solid 11px;
  3531.     left: 50%;
  3532.     margin-top: 72px;
  3533. }
  3534.  
  3535. #generated-url:hover:before, #generated-url:hover:after {
  3536.     transform: translatex(-50%) translateY(-20px);
  3537.     opacity: 1;
  3538. }
  3539.  
  3540. .raw-outputs {
  3541.     display: none;
  3542. }
  3543.  
  3544. .raw-outputs.active {
  3545.     display: block;
  3546. }
  3547.  
  3548. .raw-outputs li {
  3549.     display: inline-block;
  3550.     min-width: 40px;
  3551.     text-align: right;
  3552.     padding: 20px 5px 5px 10px;
  3553.     background: deepskyblue;
  3554.     box-sizing: border-box;
  3555.     position: relative;
  3556.     margin: 0 5px 5px 0;
  3557.     opacity: .6;
  3558. }
  3559.  
  3560. .raw-outputs li.disabled {
  3561.     background: orangered;
  3562. }
  3563.  
  3564. .raw-outputs li:before {
  3565.     content: attr(data-shortname);
  3566.     font-size: 15px;
  3567.     font-weight: bold;
  3568.     color: white;
  3569.     position: absolute;
  3570.     top: 3px;
  3571.     left: 4px;
  3572. }
  3573.  
  3574. #mapping-config .form-group {
  3575.     font-size: 20px;
  3576.     display: flex;
  3577.     flex-wrap: wrap;
  3578. }
  3579.  
  3580. #mapping-config #mappings select {
  3581.     font-size: inherit;
  3582. }
  3583.  
  3584. #mapping-config #mappings .form-group > select {
  3585.     display: none;
  3586. }
  3587.  
  3588. #mapping-config #mappings button {
  3589.     flex-grow: 1;
  3590.     margin: 0 5px 0px 14px;
  3591.     transition: .4s ease-out;
  3592.     position: relative;
  3593. }
  3594.  
  3595. #mapping-config #mappings .form-group > button + button {
  3596.     display: none;
  3597.     margin: 0 5px 0px 0px;
  3598. }
  3599.  
  3600. #mapping-config #mappings [data-tooltip]:after {
  3601.     opacity: 0;
  3602.     content: attr(data-tooltip);
  3603.     position: absolute;
  3604.     top: 0;
  3605.     left: 50%;
  3606.     transform: translateX(-50%);
  3607.     pointer-events: none;
  3608.     background: orangered;
  3609.     color: white;
  3610.     padding: 4px;
  3611.     border-radius: 23px;
  3612.     transition: .3s ease-out;
  3613.     white-space: nowrap;
  3614. }
  3615.  
  3616. #mapping-config .template {
  3617.     display: none;
  3618. }
  3619.  
  3620. #mapping-config .map-control {
  3621.     font-size: 24px;
  3622.     padding-bottom: 10px;
  3623.     text-decoration: none;
  3624.     display: inline-block;
  3625.     color: black;
  3626. }
  3627.  
  3628. #mapping-config .map-control i {
  3629.     vertical-align: top;
  3630. }
  3631.  
  3632. #mapping-help.map-control {
  3633.     float: right;
  3634. }
  3635.  
  3636. #mapping-help.map-control:after {
  3637.     display: block;
  3638.     clear: both;
  3639. }
  3640.  
  3641. #mapping-config .form-group .material-icons {
  3642.     color: black;
  3643.     transition: .4s ease-out;
  3644.     opacity: .5;
  3645.     text-decoration: none;
  3646.     font-size: 37px;
  3647.     line-height: normal;
  3648.     vertical-align: bottom;
  3649. }
  3650.  
  3651. #mapping-config .form-group .material-icons:hover {
  3652.     opacity: 1;
  3653. }
  3654.  
  3655. #mapping-config .add-config:hover {
  3656.     color: green;
  3657. }
  3658.  
  3659. #mapping-config .del-config:hover {
  3660.     color: red;
  3661. }
  3662.  
  3663. #mapping-config input[type=radio], #mapping-config .disable-item {
  3664.     margin-right: 70px;
  3665.     display: inline-block;
  3666.     width: 0px;
  3667.     height: 23px;
  3668.     font-size: inherit;
  3669.     opacity: .5;
  3670.     transition: .4s ease-out;
  3671. }
  3672.  
  3673. #mapping-config input[type=radio][value=axes] {
  3674.     margin-right: 50px;
  3675. }
  3676.  
  3677. #mapping-config input[type=radio][value="dpad"] {
  3678.     margin-right: 36px;
  3679. }
  3680.  
  3681. #mapping-config select{
  3682.     margin-left: 6px;
  3683. }
  3684.  
  3685. #mapping-config input[type=radio]:checked, #mapping-config .disable-item:checked {
  3686.     opacity: 1;
  3687. }
  3688.  
  3689. #mapping-config #mappings .disable-item:checked ~ button {
  3690.     opacity: .5;
  3691.     pointer-events: none;
  3692.  
  3693. }
  3694.  
  3695. #mapping-config input[value="buttons"]:after, #mapping-config input[value="axes"]:after, #mapping-config input[value="dpad"]:after, #mapping-config .disable-item:after {
  3696.     display: inline-block;
  3697.     background: orangered;
  3698.     color: white;
  3699.     padding: 5px;
  3700.     border-radius: 3px;
  3701.     cursor: pointer;
  3702. }
  3703.  
  3704. #mapping-config input[value="buttons"]:after {
  3705.     content: "Button";
  3706. }
  3707.  
  3708. #mapping-config input[value="axes"]:after {
  3709.     content: "Axis";
  3710. }
  3711.  
  3712. #mapping-config input[value="dpad"]:after {
  3713.     font-family: "Material Icons";
  3714.     content: "gamepad";
  3715.     font-size: 23px;
  3716. }
  3717.  
  3718. #mapping-config .disable-item:after {
  3719.     content: "Disable";
  3720. }
  3721.  
  3722. #mapping-config .axes-config:after {
  3723.     font-family: inherit;
  3724.     content: "check_box_outline_blank";
  3725.     line-height: inherit;
  3726.     cursor: pointer;
  3727. }
  3728.  
  3729. #mapping-config .axes-config:checked:after {
  3730.     content: "check_box";
  3731. }
  3732.  
  3733. #mapping-config .axes-config {
  3734.     width: 37px;
  3735.     height: 0;
  3736.     padding: 0;
  3737.     margin: 0;
  3738.     outline: none;
  3739. }
  3740.  
  3741. #mapping-config .axes-config:checked {
  3742.     opacity: 1;
  3743. }
  3744.  
  3745. #mapping-config .axes-config {
  3746.     order: -1;
  3747. }
  3748.  
  3749. #mapping-config #mappings input[value="buttons"]:checked ~ select[name="buttons"], #mapping-config #mappings input[value="axes"]:checked ~ select[name="axes"] {
  3750.     display: inline-block;
  3751. }
  3752.  
  3753. #mapping-config #mappings .fix-panel {
  3754.     display: none;
  3755.     width: 100%;
  3756.     margin-top: 5px;
  3757.     font-size: 20px;
  3758. }
  3759.  
  3760. #mapping-config #mappings .fix-panel span {
  3761.     line-height: 37px;
  3762.     margin-right: 5px;
  3763.     font-size: inherit;
  3764. }
  3765.  
  3766. #mapping-config #mappings .fix-axes, #mapping-config #mappings .fix-dpad li{
  3767.     height: 37px;
  3768. }
  3769.  
  3770. #mapping-config #mappings .fix-dpad li{
  3771.     display: flex;
  3772.     margin-bottom: 5px;
  3773.     justify-content: flex-end;
  3774. }
  3775.  
  3776. #mapping-config #mappings .fix-dpad{
  3777.     flex-direction: column;
  3778. }
  3779.  
  3780. #mapping-config #mappings .fix-dpad button {
  3781.     max-width: 655px;
  3782. }
  3783.  
  3784. #mapping-config #mappings .axes-config:checked ~ .fix-axes, #mapping-config #mappings input[type=radio][value=dpad]:checked ~ .fix-dpad{
  3785.     display: flex;
  3786. }
  3787.  
  3788. #mapping-config #mappings .axes-config:checked ~ button:nth-of-type(2) {
  3789.     display: none !important;
  3790. }
  3791.  
  3792. #mapping-config #mappings input[value="dpad"]:checked ~ .axes-config, #mapping-config #mappings input[value="dpad"]:checked ~ .fix-axes{
  3793.     display: none;
  3794. }
  3795.  
  3796. #mapping-config #mappings input[value="axes"]:checked ~ .axes-config:not(:checked) ~ [data-tooltip]:hover:after, #mapping-config #mappings .fix-axes [data-tooltip]:hover:after {
  3797.     opacity: 1;
  3798.     top: -28px;
  3799. }
  3800.  
  3801. #mapping-config #mappings input[value="axes"]:checked ~ button:nth-of-type(2) {
  3802.     display: block;
  3803. }
  3804.  
  3805. #mapping-config #mappings .map-message {
  3806.     width: 100%;
  3807.     display: none;
  3808.     order: -2;
  3809.     background: darkgreen;
  3810.     color: #F2F2F2;
  3811.     padding: 5px;
  3812.     border-radius: 3px;
  3813.     margin-bottom: 5px;
  3814. }
  3815.  
  3816. #mapping-config #mappings .map-message.error {
  3817.     display: block;
  3818.     background: hsla(0,86%,50%,1);
  3819. }
  3820.  
  3821. #mapping-config #mappings .map-message.success{
  3822.     display: block;
  3823.     animation: 4s msg-animation forwards;
  3824. }
  3825.  
  3826. #mapping-config .button-group button {
  3827.     float: right;
  3828.     font-size: 20px;
  3829.     padding: 5px;
  3830.     border-radius: 3px;
  3831.     background: orangered;
  3832.     color: white;
  3833.     border: none;
  3834.     cursor: pointer;
  3835.     margin-left: 10px;
  3836. }
  3837.  
  3838. #mappings:empty + div {
  3839.     display: none;
  3840. }
  3841.  
  3842. #showcase .preview iframe {
  3843.     width: 100%;
  3844.     height: 100%;
  3845. }
  3846.  
  3847. #showcase .preview {
  3848.     height: 150px;
  3849.     width: 200px;
  3850.     float: left;
  3851.     margin-right: 10px;
  3852. }
  3853.  
  3854. #showcase .description {
  3855.  
  3856. }
  3857.  
  3858. #adoptaskin p {
  3859.     margin-bottom: 8px;
  3860. }
  3861.  
  3862. #adoptaskin article ul {
  3863.     list-style: inside disc;
  3864.     margin: 0 0 8px 10px;
  3865. }
  3866.  
  3867. #adoptaskin article ul li:not(:last-of-type) {
  3868.     margin-bottom: 4px;
  3869. }
  3870.  
  3871. #adoptaskin #skin-tc {
  3872.     color: white;
  3873.     text-align: center;
  3874.     width: 100%;
  3875.     display: block;
  3876.     background: crimson;
  3877.     padding: 10px;
  3878.     box-sizing: border-box;
  3879.     text-decoration: none;
  3880.     border-radius: 4px;
  3881. }
  3882.  
  3883. #contact-form input, #contact-form textarea, #contact-form select {
  3884.     width: 100%;
  3885.     box-sizing: border-box;
  3886.     font-size: 30px;
  3887.     padding: 10px;
  3888.     font-family: inherit;
  3889. }
  3890.  
  3891. #contact-form textarea {
  3892.     min-height: 200px;
  3893. }
  3894.  
  3895. #contact-form .g-recaptcha {
  3896.     float: left;
  3897. }
  3898.  
  3899. #contact-form .button-group {
  3900.     float: right;
  3901. }
  3902.  
  3903. #contact-form .button-group button {
  3904.     background: tomato;
  3905.     border: 1px solid rgba(0, 0, 0, 0.1);
  3906.     height: 78px;
  3907.     font-size: 30px;
  3908.     padding: 0px 50px;
  3909.     border-radius: 4px;
  3910.     color: white;
  3911.     margin-left: 10px;
  3912.     box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 4px 1px;
  3913. }
  3914.  
  3915. #contact-form .button-group button:disabled {
  3916.     opacity: 0.5;
  3917. }
  3918.  
  3919. #messages {
  3920.     background: orangered;
  3921.     border-radius: 3px;
  3922.     padding: 10px;
  3923.     box-sizing: border-box;
  3924.     margin-bottom: 10px;
  3925.     color: white;
  3926. }
  3927.  
  3928. #messages p {
  3929.     padding: 0px;
  3930.     margin: 0px;
  3931. }
  3932.  
  3933. #messages ul {
  3934.     list-style: inside disc;
  3935. }
  3936.  
  3937. #messages ul li {
  3938.     margin-bottom: 4px
  3939. }
  3940.  
  3941. #messages.success {
  3942.     background: #006b00;
  3943. }
  3944.  
  3945. #messages:empty {
  3946.     display: none;
  3947. }
  3948.  
  3949. #donate article {
  3950.     display: flex;
  3951.     flex-direction: row;
  3952. }
  3953.  
  3954. #donate .donate-buttons {
  3955.     flex: 0 0 250px;
  3956.     display: flex;
  3957.     flex-direction: column;
  3958.     margin-left: 10px;
  3959. }
  3960.  
  3961. #donate .donate-buttons a {
  3962.     text-decoration: none;
  3963.     margin: 0.7%;
  3964. }
  3965.  
  3966. #donate .donate-buttons .dbutton {
  3967.     text-align: center;
  3968.     box-sizing: border-box;
  3969.     padding: 12px;
  3970.     border-radius: 3px;
  3971. }
  3972.  
  3973. #donate .dbutton .fa {
  3974.     margin-right: 5px;
  3975. }
  3976.  
  3977. #donate .pp.dbutton {
  3978.     background: #009CDE;
  3979.     color: black;
  3980. }
  3981.  
  3982. #donate .btc.dbutton {
  3983.     background: yellowgreen;
  3984.     color: black;
  3985. }
  3986.  
  3987. #donate .amzn.dbutton {
  3988.     background: #FF9900;
  3989.     color: black;
  3990. }
  3991.  
  3992. /* Survey Beg Box */
  3993. .plshalpme {
  3994.     display: none;
  3995. }
  3996.  
  3997. .disconnected[id*=gamepad-] .plshalpme {
  3998.     display: block;
  3999.     position: absolute;
  4000.     width: 100%;
  4001.     height: 100%;
  4002.     background: darkred;
  4003. }
  4004.  
  4005. .disconnected[id*=gamepad-] .plshalpme div {
  4006.     display: block;
  4007.     /* margin: 0 auto; */
  4008.     /* width: 238px; */
  4009.     text-align: center;
  4010.     position: absolute;
  4011.     top: 50%;
  4012.     transform: translateY(-50%) translateX(-50%);
  4013.     color: whitesmoke;
  4014.     font-size: 68px;
  4015.     left: 50%;
  4016. }
  4017.  
  4018. .disconnected[id*=gamepad-] .plshalpme a {
  4019.     color: whitesmoke;
  4020.     text-decoration: none;
  4021. }
  4022.  
  4023. /*Generic Classes*/
  4024. .active {
  4025.     display: block;
  4026. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!