[css] style

Viewer

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

Editor

You can edit this paste and save as new:


File Description
  • style
  • Paste Code
  • 26 Feb-2021
  • 68.9 Kb
You can Share it: