css/build.css - main - pixelsuft/wolf-html

css/build.css
1 353 строки22 KB
Pixelsuft
first commit
08 янв 2022, 16:42
08 янв 2022, 16:429359688
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  color: #fff;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

canvas {
  image-rendering: optimizeSpeed;
  /* Legal fallback                 */
  image-rendering: -moz-crisp-edges;
  /* Firefox                        */
  image-rendering: -o-crisp-edges;
  /* Opera                          */
  image-rendering: -webkit-optimize-contrast;
  /* Chrome (and eventually Safari) */
  image-rendering: optimize-contrast;
  /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE8+                           */
}

.fb-like {
  position: fixed !important;
  z-index: 10000;
  bottom: 5px;
  left: 5px;
  background: #fff;
  padding: 3px;
  border-radius: 5px;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.5);
}

.donate-button {
  position: fixed;
  z-index: 10000;
  top: 5px;
  right: 5px;
  background: #fff;
  padding: 3px;
  border-radius: 5px;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.5);
}

.menu ::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

.menu ::-webkit-scrollbar:hover {
  height: 18px;
}

.menu ::-webkit-scrollbar-button:start:decrement,
.menu ::-webkit-scrollbar-button:end:increment {
  display: none;
}

.menu ::-webkit-scrollbar-track-piece {
  background-color: #580000;
}

.menu ::-webkit-scrollbar-thumb:vertical {
  background-color: #d40000;
}

.menu ::-webkit-scrollbar-thumb:horizontal {
  background-color: #d40000;
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fadein {
  opacity: 1 !important;
  z-index: 1000 !important;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

.menu {
  background-color: #880000 !important;
}

.menu .stripes {
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  top: 50% !important;
  z-index: 0 !important;
}

.menu img {
  z-index: 1;
}

.menu .stripe-line {
  display: none;
  margin-top: -178px;
  height: 4px;
}

#resources img {
  display: none;
}

@-webkit-keyframes disc {
  0% {
    background-position: 0px 0px;
  }

  50% {
    background-position: 0px -32px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-moz-keyframes disc {
  0% {
    background-position: 0px 0px;
  }

  50% {
    background-position: 0px -32px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-ms-keyframes disc {
  0% {
    background-position: 0px 0px;
  }

  50% {
    background-position: 0px -32px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-o-keyframes disc {
  0% {
    background-position: 0px 0px;
  }

  50% {
    background-position: 0px -32px;
  }

  100% {
    background-position: 0px 0px;
  }
}

#loading {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  background-image: url(../images/loading.png);
  -webkit-animation: disc 1s steps(1) infinite;
  -moz-animation: disc 1s steps(1) infinite;
  -ms-animation: disc 1s steps(1) infinite;
  -o-animation: disc 1s steps(1) infinite;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

#msg {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

#msgtext {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #8c8c8c;
  border: solid 2px #000;
  border-top-color: #c0c0c0;
  border-left-color: #c0c0c0;
  padding: 16px;
  white-space: nowrap;
}

#pc13, #title, #credits, #highscores,
#menu, #gamemenu, #episode, #difficulty,
#detail, #sound, #customize, #savegame,
#loadgame, #game, #copyright, #donation {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

#donation,
#copyright {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #dcdcdc;
}

#donation .content,
#copyright .content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: #dcdcdc;
}

#donation .content .text.readme,
#copyright .content .text.readme {
  float: none;
}

#pc13 {
  background-color: #20a8fc;
}

#pc13 img {
  position: absolute;
  right: 10%;
  bottom: 10%;
}

#title, #credits {
  background-color: #000;
}

#title img, #credits img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -480px;
  margin-top: -300px;
  width: 960px;
  height: 600px;
}

#credits .stripes {
  width: 100% !important;
  height: 600px !important;
  margin-top: -300px !important;
}

#highscores .title, #highscores .stripes {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -336px;
  margin-top: -270px;
  width: 672px;
  height: 158px;
}

#highscores .name, #highscores .level, #highscores .score {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -96px;
  width: auto;
  height: auto;
}

#highscores .name {
  margin-left: -384px;
}

#highscores .level {
  margin-left: 0;
}

#highscores .score {
  margin-left: 192px;
}

#highscores .stripes {
  width: 100% !important;
  height: 158px !important;
}

#highscores .rows {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 788px;
  margin-left: -480px;
  margin-top: -76px;
  border-collapse: separate;
  border-spacing: 0;
}

#highscores .rows tr {
  height: 48px;
}

#highscores .rows tr td {
  text-align: center;
  font-weight: bold;
}

#highscores .rows tr td img {
  position: static;
  left: 0;
  top: 0;
  margin: 0;
  width: auto;
  height: auto;
}

#highscores .rows .col-name {
  padding-left: 96px;
  width: 384px;
  text-align: left;
}

#highscores .rows .col-level {
  width: 128px;
  text-align: left;
}

#highscores .rows .col-score {
  text-align: right;
}

#menu .title, #menu .stripes,
#gamemenu .title, #gamemenu .stripes,
#customize img.title, #customize .stripes {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -228px;
  margin-top: -272px;
  width: 456px;
  height: 144px;
}

#savegame img.title, #savegame .stripes,
#loadgame img.title, #loadgame .stripes {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -324px;
  margin-top: -272px;
  width: 648px;
  height: 144px;
}

#menu .help, #gamemenu .help,
#episode .help, #difficulty .help,
#detail .help, #sound .help,
#customize .help, #savegame .help, #loadgame .help {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -156px;
  margin-top: 252px;
  width: 312px;
  height: 48px;
}

#menu .stripes, #gamemenu .stripes, #customize .stripes, #savegame .stripes, #loadgame .stripes {
  width: 100% !important;
  height: 144px !important;
}

#menu .options, #gamemenu .options, #savegame .options, #loadgame .options {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 534px;
  height: 382px;
  margin-left: -267px;
  margin-top: -118px;
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
  z-index: 2;
  overflow: hidden;
}

@-webkit-keyframes cursor {
  0% {
    background-position: 0px 0px;
  }

  80% {
    background-position: 0px -48px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-moz-keyframes cursor {
  0% {
    background-position: 0px 0px;
  }

  80% {
    background-position: 0px -48px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-ms-keyframes cursor {
  0% {
    background-position: 0px 0px;
  }

  80% {
    background-position: 0px -48px;
  }

  100% {
    background-position: 0px 0px;
  }
}

@-o-keyframes cursor {
  0% {
    background-position: 0px 0px;
  }

  80% {
    background-position: 0px -48px;
  }

  100% {
    background-position: 0px 0px;
  }
}

#menu .cursor, #gamemenu .cursor, #savegame .cursor, #loadgame .cursor {
  position: absolute;
  width: 72px;
  height: 48px;
  background-image: url(../images/menu-cursor.png);
  background-repeat: no-repeat;
  margin-left: 12px;
  background-size: 72px 96px;
  -webkit-transition: top 0.1s;
  -moz-transition: top 0.1s;
  -ms-transition: top 0.1s;
  -o-transition: top 0.1s;
  -webkit-animation: cursor 1s steps(1) infinite;
  -moz-animation: cursor 1s steps(1) infinite;
  -ms-animation: cursor 1s steps(1) infinite;
  -o-animation: cursor 1s steps(1) infinite;
}

#menu .options .text, #gamemenu .options .text {
  margin: 5px 0 4px 96px;
  /*margin-left: 96px;
    margin-bottom: 5px;*/
  padding: 0;
  height: 32px;
  line-height: 32px;
}

#episode .options {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 930px;
  height: 490px;
  margin-left: -465px;
  margin-top: -240px;
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
  z-index: 2;
  overflow-y: auto;
}

#episode .episode>img {
  width: 144px;
  height: 72px;
  float: left;
  margin: 0 20px 0 96px;
}

#episode .options .episode {
  height: 72px;
  margin: 5px 0 4px 0;
}

#episode .options .episode .text {
  height: 32px;
  margin: 5px 0 4px 0;
}

#episode .title {
  position: absolute;
  top: 50%;
  margin-top: -292px;
  width: 100%;
  text-align: center;
}

#episode .cursor, #difficulty .cursor, #detail .cursor, #sound .cursor {
  position: absolute;
  width: 72px;
  height: 48px;
  background-image: url(../images/menu-cursor.png);
  background-repeat: no-repeat;
  margin-left: 0px;
  background-size: 72px 96px;
  -webkit-transition: top 0.1s;
  -moz-transition: top 0.1s;
  -ms-transition: top 0.1s;
  -o-transition: top 0.1s;
  -webkit-animation: cursor 1s steps(1) infinite;
  -moz-animation: cursor 1s steps(1) infinite;
  -ms-animation: cursor 1s steps(1) infinite;
  -o-animation: cursor 1s steps(1) infinite;
}

#episode7 .page>img {
  width: 960px;
  height: 600px;
}

#episode7 .page {
  padding: 0 !important;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

#episode7 .up,
#episode7 .down,
#episode7 .left,
#episode7 .right,
#episode7 .text.pagenr {
  display: none;
}

#episode7 .text.readme {
  float: none;
}

@-webkit-keyframes minicursor {
  0% {
    background-position: 0px -6px;
  }

  80% {
    background-position: 0px -54px;
  }

  100% {
    background-position: 0px -6px;
  }
}

@-moz-keyframes minicursor {
  0% {
    background-position: 0px -6px;
  }

  80% {
    background-position: 0px -54px;
  }

  100% {
    background-position: 0px -6px;
  }
}

@-ms-keyframes minicursor {
  0% {
    background-position: 0px -6px;
  }

  80% {
    background-position: 0px -54px;
  }

  100% {
    background-position: 0px -6px;
  }
}

@-o-keyframes minicursor {
  0% {
    background-position: 0px -6px;
  }

  80% {
    background-position: 0px -54px;
  }

  100% {
    background-position: 0px -6px;
  }
}

#customize .cursor {
  position: absolute;
  top: 1px;
  width: 72px;
  height: 34px;
  background-image: url(../images/menu-cursor.png);
  background-repeat: no-repeat;
  background-size: 72px 96px;
  -webkit-transition: margin-top 0.1s;
  -moz-transition: margin-top 0.1s;
  -ms-transition: margin-top 0.1s;
  -o-transition: margin-top 0.1s;
  -webkit-animation: minicursor 1s steps(1) infinite;
  -moz-animation: minicursor 1s steps(1) infinite;
  -ms-animation: minicursor 1s steps(1) infinite;
  -o-animation: minicursor 1s steps(1) infinite;
}

#difficulty .title {
  position: absolute;
  top: 50%;
  margin-top: -64px;
  width: 100%;
  text-align: center;
}

#difficulty .options {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 580px;
  height: 170px;
  padding: 16px 0 0 80px;
  margin-left: -330px;
  margin-top: 0;
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
  z-index: 2;
}

#difficulty .cursor {
  left: 0px;
  margin-top: 72px;
}

#difficulty .options .text {
  height: 32px;
  margin: 5px 0 4px 0;
}

#difficulty #difficultypicture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 96px;
  margin-left: 224px;
  margin-top: -64px;
  background-image: url(../images/difficulty-pictures.png);
  background-repeat: no-repeat;
  background-position: 0px -192px;
  background-size: 72px 384px;
}

.readme-view {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 600px;
  margin-left: -480px;
  margin-top: -300px;
  background-color: #dcdcdc;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

.readme-view .up {
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background-image: url(../images/readthis-up.png);
}

.readme-view .down {
  position: absolute;
  left: 24px;
  right: 24px;
  height: 72px;
  bottom: 0;
  background-image: url(../images/readthis-down.png);
}

.readme-view .left {
  position: absolute;
  left: 0;
  top: 24px;
  width: 24px;
  height: 576px;
  background-image: url(../images/readthis-left.png);
}

.readme-view .right {
  position: absolute;
  right: 0;
  top: 24px;
  width: 24px;
  height: 576px;
  background-image: url(../images/readthis-right.png);
}

.readme-view .text.pagenr {
  position: absolute;
  bottom: 16px;
  left: 640px;
  z-index: 3;
}

.readme-view .page {
  display: none;
  overflow: hidden;
  position: absolute;
  left: 24px;
  top: 24px;
  right: 24px;
  bottom: 72px;
  padding: 24px;
}

.readme-view .page.selected {
  display: block;
}

.clear {
  clear: both;
  height: 24px;
}

br {
  clear: both;
}

.text.readme {
  margin-right: 16px;
  white-space: nowrap;
  float: left;
  height: 32px;
}

#detail .title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: -220px;
}

#detail .options {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 504px;
  height: 348px;
  padding: 5px;
  margin-left: -257px;
  margin-top: -170px;
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
}

#detail .cursor {
  top: 132px;
}

#detail .options table {
  margin-left: 72px;
}

#detail .options table tr td {
  text-align: right;
  padding: 0 16px 0 16px;
}

#detail .options table tr td .switch {
  margin-top: -6px;
}

#sound .soundtitle, #sound .musictitle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

#sound .soundtitle {
  margin-top: -170px;
}

#sound .musictitle {
  margin-top: 0px;
}

#sound .soundoption, #sound .musicoption {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  margin-left: -450px;
  padding-top: 8px;
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
}

#sound .soundoption {
  margin-top: -120px;
}

#sound .musicoption {
  margin-top: 50px;
}

#sound .bar {
  position: absolute;
  left: 50%;
  width: 600px;
  height: 28px;
  margin-left: -300px;
  margin-top: 3px;
  background-color: #8e8e8e;
  border: solid 2px #c3c3c3;
  border-bottom-color: #000;
  border-right-color: #000;
}

#sound .thumb {
  position: relative;
  left: -2px;
  top: -2px;
  width: 50px;
  height: 28px;
  margin-left: 550px;
  background-color: #fff700;
  border: solid 2px #b6ae00;
  border-bottom-color: #000;
  border-right-color: #000;
  /*-webkit-transition: margin-left 0.1s;
    -moz-transition: margin-left 0.1s;
    -ms-transition: margin-left 0.1s;
    -o-transition: margin-left 0.1s;*/
}

#sound .cursor {
  top: 50%;
  left: 50%;
  margin-left: -448px;
  z-index: 1;
  /*-webkit-transition: margin-top 0.1s;
    -moz-transition: margin-top 0.1s;
    -ms-transition: margin-top 0.1s;
    -o-transition: margin-top 0.1s;*/
}

#sound .cursor.sound {
  margin-top: -76px;
}

#sound .cursor.music {
  margin-top: 94px;
}

.menu .switch {
  float: left;
  width: 72px;
  height: 24px;
  background-image: url(../images/menu-switch.png);
  background-repeat: no-repeat;
}

.menu .switch.selected {
  background-position: 0px -24px;
}

#customize .text {
  height: 35px;
}

#customize .text.readthis {
  width: 100%;
  text-align: center;
}

#customize table {
  position: relative;
  left: 50%;
  margin-left: -450px;
}

#customize table:not(.option) {
  z-index: 1;
}

#customize table tr td {
  width: 180px;
}

#customize .option {
  background-color: #580000;
  border: solid 2px #700000;
  border-bottom-color: #d40000;
  border-right-color: #d40000;
}

#customize .text.readme.change {
  position: relative;
  left: -4px;
  height: 31px;
  margin-right: 4px;
  background-color: #8e8e8e;
  border: solid 2px #c3c3c3;
  border-bottom-color: #000;
  border-right-color: #000;
}

#customize .text.readme.change img {
  position: relative;
  top: -2px;
}

@-webkit-keyframes blinking {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes blinking {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes blinking {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes blinking {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#customize .text.readme.change.wait img, .textcursor {
  -webkit-animation: blinking 1s steps(1) infinite;
  -moz-animation: blinking 1s steps(1) infinite;
  -ms-animation: blinking 1s steps(1) infinite;
  -o-animation: blinking 1s steps(1) infinite;
}

.beforecursor {
  float: left;
}

.textcursor {
  width: 4px;
  height: 30px;
  background-color: #fff;
}

#savegame .cursor, #loadgame .cursor {
  margin-top: -3px;
}

#savegame .slot, #loadgame .slot {
  border: solid 2px #8e8e8e;
  width: 430px;
  height: 30px;
  margin: 3px 0 4px 96px;
}

#savegame .slot.empty, #loadgame .slot.empty {
  text-align: center;
}

#savegame .slot.selected, #loadgame .slot.selected {
  border-color: #fff;
}

#game {
  background-color: #004040;
}

#game #container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 600px;
  margin-left: -480px;
  margin-top: -300px;
}

#game #endlevelscreen, #game #secretlevelscreen, #game #wingamescreen, #game #letsseethatagain {
  position: absolute;
  left: 21px;
  top: 8px;
  width: 922px;
  height: 472px;
  display: none;
  background-color: #004040;
}

#game #letsseethatagain {
  position: absolute;
  left: 0px;
  top: 8px;
  width: 100%;
}

#game #letsseethatagain .text {
  margin-top: 256px;
}

#game #view {
  position: absolute;
  left: 21px;
  top: 8px;
  width: 918px;
  height: 468px;
  border: inset 2px #000;
  border-bottom-color: #007070;
  border-right-color: #007070;
}

@-webkit-keyframes bj {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 0px -528px;
  }
}

@-moz-keyframes bj {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 0px -528px;
  }
}

@-ms-keyframes bj {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 0px -528px;
  }
}

@-o-keyframes bj {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 0px -528px;
  }
}

#endlevelscreen .picture, #secretlevelscreen .picture {
  position: absolute;
  background-image: url(../images/endlevel-bj.png);
  background-size: 312px 528px;
  width: 312px;
  height: 264px;
  -webkit-animation: bj 1s steps(2) infinite;
  -moz-animation: bj 1s steps(2) infinite;
  -ms-animation: bj 1s steps(2) infinite;
  -o-animation: bj 1s steps(2) infinite;
}

#wingamescreen .picture {
  position: absolute;
  background-image: url(../images/youwin-bj.png);
  background-size: 264px 264px;
  width: 264px;
  height: 264px;
}

#wingamescreen .win {
  margin-left: 412px;
  margin-top: 36px;
  margin-bottom: 36px;
}

#wingamescreen .total, #wingamescreen .time {
  margin-left: 316px;
}

#wingamescreen .averages {
  margin-top: 36px;
}

#wingamescreen .averages, #wingamescreen .kill, #wingamescreen .secret, #wingamescreen .treasure {
  width: 100%;
  text-align: center;
}

#secretlevelscreen .secret {
  margin-top: 48px;
  margin-left: 328px;
}

#secretlevelscreen .completed {
  margin-left: 372px;
}

#secretlevelscreen .bonus {
  margin-top: 200px;
  width: 100%;
  text-align: center;
}

#endlevelscreen .floor, #endlevelscreen .completed, #endlevelscreen .bonus {
  margin-left: 328px;
}

#endlevelscreen .time, #endlevelscreen .par {
  margin-left: 360px;
}

#endlevelscreen .bonus {
  margin-top: 24px;
  margin-bottom: 24px;
}

#game #background, #game #mask, #game #ctrl {
  position: absolute;
  left: 23px;
  top: 10px;
  width: 918px;
  height: 468px;
}

#gamepause {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -96px;
  margin-top: -48px;
  z-index: 5;
}

#hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background-image: url(../images/hud/hud.png);
  background-size: 960px 120px;
}

#hud #weapon {
  position: absolute;
  left: 768px;
  top: 24px;
  width: 144px;
  height: 72px;
}

#hud #ammo {
  position: absolute;
  left: 608px;
  top: 48px;
  width: 96px;
  height: 48px;
}

#hud #health {
  position: absolute;
  left: 458px;
  top: 48px;
  width: 120px;
  height: 48px;
}

#hud #lives {
  position: absolute;
  left: 318px;
  top: 48px;
  width: 48px;
  height: 48px;
}

#hud #score {
  position: absolute;
  left: 90px;
  top: 48px;
  width: 200px;
  height: 48px;
}

#hud #floor {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 48px;
  height: 48px;
}

#hud #keys {
  position: absolute;
  left: 720px;
  top: 12px;
}

#hud #face {
  position: absolute;
  left: 408px;
  top: 18px;
  width: 72px;
  height: 88px;
}

#hand {
  position: absolute;
  left: 50%;
  bottom: 122px;
  width: 512px;
  height: 512px;
  margin-left: -256px;
}

#deathcam {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 512px;
  height: 144px;
  margin-left: -256px;
  background-image: url(../images/hud/deathcam.png);
  -webkit-animation: blinking 1s steps(1) infinite;
  -moz-animation: blinking 1s steps(1) infinite;
  -ms-animation: blinking 1s steps(1) infinite;
  -o-animation: blinking 1s steps(1) infinite;
}