@import 'https://fonts.googleapis.com/css?family=Roboto:200,400,500';

body {
  -webkit-font-smoothing: antialiased;

  margin: 0;
  padding: 0;
  
  background: rgb(240, 240, 240);
}

/* Header. */

h1 {
  margin: 0;
  padding: 0;
  margin-top: 50px;

  font-weight: 500;
  font-size: 24px;
  font-family: Roboto, Arial;
  text-align: center;
}
h2 {
  margin: 0;
  padding: 0;
  margin-top: 20px;

  font-weight: 200;
  font-size: 18px;
  font-family: Roboto, Arial;
  text-align: center;
}
#menu {
  margin-bottom: 20px;
  margin-top: 20px;

  font-family: Roboto, Arial;
  font-size: 18px;
  font-weight: 200;
  text-align: center;
}
#menu * {
  vertical-align: baseline;
}
#menu label {
  padding-left: 5px;
  padding-right: 10px;
}
a {
  color: inherit;
}

/* Error messages. */

#no-gamepads-connected,
#no-gamepad-support {
  font-family: Roboto, Arial;
  font-size: 18px;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  padding: 100px 50px;
  display: none;
}
#no-gamepad-support.visible {
  display: block;
}
#no-gamepads-connected.visible {
  display: block;
}

/* Gamepad display. */

#gamepads {
  margin: 0;
  margin-top: 50px;
  padding: 0;

  list-style: none;

  white-space: nowrap;
  text-align: center;
}
#gamepads > li {
  width: 940px;
  height: 600px;
  margin-left: -30px;

  position: relative;
  z-index: 102;
  display: inline-block;

  white-space: normal;
}
#gamepads > li.template {
  display: none;
}
#gamepads > li::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  z-index: 200;

  background: url(images/gamepad-body.png);
  background-size: 730px 499px;
  background-position: 120px 40px;
  background-repeat: no-repeat;
}
#gamepads > li > .index {
  position: absolute;
  left: 437px;
  top: 300px;
  width: 100px;

  font-weight: 500;
  z-index: 500;

  text-shadow: 0 -1px 2px rgba(0, 0, 0, .5);
  font-family: Roboto, Arial;
  font-size: 40px;
  color: rgb(120, 120, 120);
}

#gamepads > li > .name {
  position: absolute;
  left: 385px;
  right: 352px;
  top: 154px;
  height: 30px;
  line-height: 30px;

  z-index: 500;

  font-family: Roboto, Arial;
  font-size: 13px;
  font-weight: bold;
  color: rgb(224, 224, 224);
  text-shadow: 0 0 1px rgb(192, 192, 192);
  text-align: center;
}

/* Buttons. */

#gamepads > li > .buttons > ::after {
  position: absolute;
  content: '';
  border-radius: 100%;
  background: black;

  opacity: 0;
}
#gamepads > li > .buttons > .pressed::after {
  opacity: .5;
}
#gamepads > li > .buttons > .top-shoulder {
  width: 170px;
  height: 70px;

  z-index: 200;

  position: absolute;

  background-size: 164px 60px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(images/shoulder-top.png);
}
#gamepads > li > .buttons > [name='button-left-shoulder-top'] {
  left: 185px;
  top: 66px;
}
#gamepads > li > .buttons > [name='button-right-shoulder-top'] {
  left: 618px;
  top: 64px;
}
#gamepads > li > .buttons > .top-shoulder.pressed {
  margin-top: 5px;
}
#gamepads > li > .buttons > .bottom-shoulder {
  width: 170px;
  height: 70px;

  z-index: 150;

  position: absolute;

  background-size: 127px 44px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(images/shoulder-bottom.png);
}
#gamepads > li > .buttons > [name='button-left-shoulder-bottom'] {
  left: 185px;
  top: 46px;
}
#gamepads > li > .buttons > [name='button-right-shoulder-bottom'] {
  left: 618px;
  top: 44px;
}
#gamepads > li > .buttons > .bottom-shoulder.pressed {
  margin-top: 5px;
}
#gamepads > li > .buttons > .face {
  width: 50px;
  height: 50px;

  z-index: 300;

  position: absolute;

  background-size: 42px 42px;
  background-repeat: no-repeat;
  background-position: 50%;
}
#gamepads > li > .buttons > .face::after {
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
}
#gamepads > li > .buttons > [name='button-1'] {
  left: 676px;
  top: 241px;
  background-image: url(images/button-0.png);
}
#gamepads > li > .buttons > [name='button-2'] {
  left: 718px;
  top: 200px;
  background-image: url(images/button-1.png);
}
#gamepads > li > .buttons > [name='button-3'] {
  left: 635px;
  top: 200px;
  background-image: url(images/button-2.png);
}
#gamepads > li > .buttons > [name='button-4'] {
  left: 677px;
  top: 158px;
  background-image: url(images/button-3.png);
}

#gamepads > li > .buttons > [name='button-dpad-bottom'] {
  left: 246px;
  top: 242px;
  background-image: url(images/button-down.png);
}
#gamepads > li > .buttons > [name='button-dpad-right'] {
  left: 286px;
  top: 201px;
  background-image: url(images/button-right.png);
}
#gamepads > li > .buttons > [name='button-dpad-left'] {
  left: 203px;
  top: 201px;
  background-image: url(images/button-left.png);
}
#gamepads > li > .buttons > [name='button-dpad-top'] {
  left: 244px;
  top: 159px;
  background-image: url(images/button-up.png);
}
#gamepads > li > .buttons > .select-start {
  width: 90px;
  height: 90px;

  z-index: 300;

  position: absolute;

  background-size: 41px 41px;
  background-repeat: no-repeat;
  background-position: 50%;

  background-image: url(images/button-select-start.png);
}
#gamepads > li > .buttons > .select-start::after {
  left: 25px;
  top: 25px;
  right: 24px;
  bottom: 25px;
}
#gamepads > li > .buttons > [name='button-select'] {
  left: 388px;
  top: 178px;
}
#gamepads > li > .buttons > [name='button-start'] {
  left: 492px;
  top: 178px;
}

/* Sticks. */

#gamepads > li > .buttons > .stick {
  width: 190px;
  height: 190px;

  z-index: 300;

  position: absolute;

  background-size: 91px 91px;
  background-repeat: no-repeat;
  background-position: 50%;

  background-image: url(images/stick.png);
}
#gamepads > li > .buttons > .stick::after {
  left: 54px;
  top: 54px;
  right: 54px;
  bottom: 54px;
}

#gamepads > li > .buttons > [name='stick-1'] {
  left: 286px;
  top: 243px;
}
#gamepads > li > .buttons > [name='stick-2'] {
  left: 495px;
  top: 243px;
}

/* Labels. */

#gamepads > li > .labels label {
  z-index: 800;
  color: black;
  font-family: Roboto, Arial;
  font-size: 18px;
  line-height: 24px;

  width: 120px;
  margin-left: -60px;
  margin-top: 0;
  display: block;
  text-align: center;
  font-weight: normal;

  position: absolute;

  opacity: .25;
  -webkit-transition: opacity 1500ms;
  -webkit-transition-delay: 500ms;
  -moz-transition: opacity 1500ms;
  -moz-transition-delay: 500ms;
}
#gamepads > li > .labels label::before,
#gamepads > li > .labels label::after {
  font-size: 11px;
  display: block;
  font-weight: normal;
  line-height: 11px;
}
#gamepads > li > .labels > .extra-inputs > label {
  position: static;
  display: inline-block;
  margin-left: 0;
}
#gamepads > li > .labels > .extra-inputs > label::before {
  content: attr(description);
}
#gamepads > li > .labels > .extra-inputs > label::after {
  content: attr(access);
}
#gamepads > li > .labels label.visible {
  opacity: 1 !important;
  -webkit-transition: opacity 100ms;
  -webkit-transition-delay: 0;
  -moz-transition: opacity 100ms;
  -moz-transition-delay: 0;
}
#gamepads > li > .labels label.positive {
  color: rgb(0, 140, 0);
}
#gamepads > li > .labels label.negative {
  color: rgb(200, 0, 0);
}

#gamepads > li > .labels > label[for="button-1"] {
  left: 870px;
  top: 191px;
}
#gamepads > li > .labels > label[for="button-1"]::before {
  content: 'Face button 1';
}
#gamepads > li > .labels > label[for="button-1"]::after {
  content: 'buttons[0]';
}
#gamepads > li > .labels > label[for="button-2"] {
  left: 870px;
  top: 251px;
}
#gamepads > li > .labels > label[for="button-2"]::before {
  content: 'Face button 2';
}
#gamepads > li > .labels > label[for="button-2"]::after {
  content: 'buttons[1]';
}
#gamepads > li > .labels > label[for="button-3"] {
  left: 880px;
  top: 311px;
}
#gamepads > li > .labels > label[for="button-3"]::before {
  content: 'Face button 3';
}
#gamepads > li > .labels > label[for="button-3"]::after {
  content: 'buttons[2]';
}
#gamepads > li > .labels > label[for="button-4"] {
  left: 890px;
  top: 371px;
}
#gamepads > li > .labels > label[for="button-4"]::before {
  content: 'Face button 4';
}
#gamepads > li > .labels > label[for="button-4"]::after {
  content: 'buttons[3]';
}
#gamepads > li > .labels > label[for="button-dpad-top"] {
  left: 100px;
  top: 191px;
}
#gamepads > li > .labels > label[for="button-dpad-top"]::before {
  content: 'D-pad top';
}
#gamepads > li > .labels > label[for="button-dpad-top"]::after {
  content: 'buttons[12]';
}
#gamepads > li > .labels > label[for="button-dpad-left"] {
  left: 100px;
  top: 251px;
}
#gamepads > li > .labels > label[for="button-dpad-left"]::before {
  content: 'D-pad left';
}
#gamepads > li > .labels > label[for="button-dpad-left"]::after {
  content: 'buttons[14]';
}
#gamepads > li > .labels > label[for="button-dpad-right"] {
  left: 90px;
  top: 311px;
}
#gamepads > li > .labels > label[for="button-dpad-right"]::before {
  content: 'D-pad right';
}
#gamepads > li > .labels > label[for="button-dpad-right"]::after {
  content: 'buttons[15]';
}
#gamepads > li > .labels > label[for="button-dpad-bottom"] {
  left: 80px;
  top: 371px;
}
#gamepads > li > .labels > label[for="button-dpad-bottom"]::before {
  content: 'D-pad bottom';
}
#gamepads > li > .labels > label[for="button-dpad-bottom"]::after {
  content: 'buttons[13]';
}
#gamepads > li > .labels > label[for="button-left-shoulder-top"] {
  left: 210px;
  top: 10px;
}
#gamepads > li > .labels > label[for="button-left-shoulder-top"]::before {
  content: 'Left top shoulder';
}
#gamepads > li > .labels > label[for="button-left-shoulder-top"]::after {
  content: 'buttons[4]';
}
#gamepads > li > .labels > label[for="button-left-shoulder-bottom"] {
  left: 320px;
  top: 10px;
}
#gamepads > li > .labels > label[for="button-left-shoulder-bottom"]::before {
  content: 'Left bottom shoulder';
}
#gamepads > li > .labels > label[for="button-left-shoulder-bottom"]::after {
  content: 'buttons[6]';
}
#gamepads > li > .labels > label[for="button-right-shoulder-top"] {
  left: 750px;
  top: 10px;
}
#gamepads > li > .labels > label[for="button-right-shoulder-top"]::before {
  content: 'Right top shoulder';
}
#gamepads > li > .labels > label[for="button-right-shoulder-top"]::after {
  content: 'buttons[5]';
}
#gamepads > li > .labels > label[for="button-right-shoulder-bottom"] {
  left: 640px;
  top: 10px;
}
#gamepads > li > .labels > label[for="button-right-shoulder-bottom"]::before {
  content: 'Right bottom shoulder';
}
#gamepads > li > .labels > label[for="button-right-shoulder-bottom"]::after {
  content: 'buttons[7]';
}
#gamepads > li > .labels > label[for="button-select"] {
  left: 440px;
  top: 60px;
}
#gamepads > li > .labels > label[for="button-select"]::before {
  content: 'Select';
}
#gamepads > li > .labels > label[for="button-select"]::after {
  content: 'buttons[8]';
}
#gamepads > li > .labels > label[for="button-start"] {
  left: 540px;
  top: 60px;
}
#gamepads > li > .labels > label[for="button-start"]::before {
  content: 'Start';
}
#gamepads > li > .labels > label[for="button-start"]::after {
  content: 'buttons[9]';
}
#gamepads > li > .labels > label[for="stick-1-axis-x"] {
  left: 380px;
  top: 441px;
}
#gamepads > li > .labels > label[for="stick-1-axis-x"]::before {
  content: 'First stick X';
}
#gamepads > li > .labels > label[for="stick-1-axis-x"]::after {
  content: 'axes[0]';
}
#gamepads > li > .labels > label[for="stick-1-axis-y"] {
  left: 380px;
  top: 501px;
}
#gamepads > li > .labels > label[for="stick-1-axis-y"]::before {
  content: 'First stick Y';
}
#gamepads > li > .labels > label[for="stick-1-axis-y"]::after {
  content: 'axes[1]';
}
#gamepads > li > .labels > label[for="stick-1"] {
  left: 380px;
  top: 561px;
}
#gamepads > li > .labels > label[for="stick-1"]::before {
  content: 'First stick button';
}
#gamepads > li > .labels > label[for="stick-1"]::after {
  content: 'buttons[10]';
}
#gamepads > li > .labels > label[for="stick-2-axis-x"] {
  left: 590px;
  top: 441px;
}
#gamepads > li > .labels > label[for="stick-2-axis-x"]::before {
  content: 'Second stick X';
}
#gamepads > li > .labels > label[for="stick-2-axis-x"]::after {
  content: 'axes[2]';
}
#gamepads > li > .labels > label[for="stick-2-axis-y"] {
  left: 590px;
  top: 501px;
}
#gamepads > li > .labels > label[for="stick-2-axis-y"]::before {
  content: 'Second stick Y';
}
#gamepads > li > .labels > label[for="stick-2-axis-y"]::after {
  content: 'axes[3]';
}
#gamepads > li > .labels > label[for="stick-2"] {
  left: 590px;
  top: 561px;
}
#gamepads > li > .labels > label[for="stick-2"]::before {
  content: 'Second stick button';
}
#gamepads > li > .labels > label[for="stick-2"]::after {
  content: 'buttons[11]';
}

/* Raw mode (no visuals). */

#gamepads.raw > li > .labels label {
  opacity: .5;
}
#gamepads:not(.raw) > li > .labels > .extra-inputs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;

  text-align: center;
}
#gamepads.raw > li > .name {
  display: none;
}
#gamepads.raw > li > .index {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  top: 0;
  text-shadow: none;
}
#gamepads.raw > li::after {
  display: none; /* Hide gamepad body */
}
#gamepads.raw > li > .buttons {
  display: none; /* Hide buttons */
}
#gamepads.raw > li > .labels {
  margin: 0 50px;
  margin-top: 100px;
}
#gamepads.raw > li label {
  position: static;
  display: inline-block;
  margin-left: 0;
  height: 80px;
}
#gamepads.raw > li > .labels > .extra-inputs {
  margin-top: 50px;
}

/* Iframe mode. */

body.iframe {
  background: inherit;
}
body.iframe #menu {
  width: 100%;
  position: fixed;
}
body.iframe #gamepads {
  padding-top: 60px;
  margin-top: 0;
}
body.iframe h1,
body.iframe h2 {
  display: none;
}
body.iframe #no-gamepads-connected,
body.iframe #no-gamepad-support {
  padding: 400px 50px 0 50px;
}