styles.css

/*
 * Copyright (C) 2012 id Software LLC, a ZeniMax Media company. 
 *
 * This file is part of the WOLF3D Browser Version GPL Source Code. 
 *
 */

html {
    padding : 0;
    background-color : black;
}

body {
    margin : 0;
    padding : 0;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    
    width : 100%;
    height : 100%;
}

.load-progress {
    position : absolute;
    left : 0;
    bottom : 0;
    height : 5px;
    width : 0;
    background-color : #666;
}


#main {
    position : absolute;
    left : 0;
    top : 0;
    width : 640px;
    height : 400px;
    left : 50%;
    top : 50%;
    margin-left : -320px;
    margin-top : -200px;
    overflow : hidden;
}

#game, #menu, #title-screen {
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    display : none;
    background-repeat : no-repeat;
}

#title-screen {
    background-image : url(art/title.png);
    display : block;
}

#game {
    background-color : rgb(0,56,56);
    background-image : url(art/gamebg.png);
}



#game .loading {
    background-color : rgb(0,56,56);
    display : none;
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 320px;
    z-index : 60;
}
#game .loading img {
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -224px;
    margin-top : -48px;
}


#game .renderer {
    z-index : 50;
    background-color : #222;
    overflow : hidden;
    position : absolute;
    left : 16px;
    top : 8px;
    cursor : crosshair;
}

#game *,
#game .renderer div,
#game .renderer div img,
#game .renderer .sprite,
#game .renderer .sprite img {
    image-rendering : optimizeSpeed;
    image-rendering : -moz-crisp-edges;
    image-rendering : -o-crisp-edges;
    image-rendering : optimize-contrast;
    image-rendering : -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

#game .renderer .player-weapon {
    z-index : 100000000;
    width : 256px;
    height : 256px;
    position : absolute;
    bottom : 0;
    left : 50%;
    margin-left : -128px;
    background-image : url(art/attack.png);
    background-repeat : no-repeat;
}


#game .renderer .overlay {
    z-index : 200000000;
    width : 100%;
    height : 100%;
    position : absolute;
    top : 0;
    left : 0;
    display : none;
}

#game .renderer .damage-flash {
    background : rgba(255,0,0,0.25);
}
#game .renderer .bonus-flash {
    background : rgba(255,255,128,0.20);
}
#game .renderer .death {
    background : rgba(255,0,0,0);
}

#game .renderer .pause {
    background : rgba(32,32,32,0.5);
}
#game .renderer .pause img {
    position : absolute;
    left : 50%;
    top : 50%;
    margin-left : -64px;
    margin-top : -32px;
}


#game .ceiling, #game .floor {
    position : absolute;
    z-index : 0;
    left : 0;
    width : 100%;
    height : 50%;
}

#game .ceiling {
    top : 0;
}

#game .floor{
    top : 50%;
}

#game .hud {
    position : absolute;
    z-index : 100;
    bottom : 0;
    width : 640px;
    height : 80px;
    background-image : url(art/hudbg.png);
}

#game .hud .bj {
    position : absolute;
    width : 48px;
    height : 64px;
    left : 273px;
    top : 9px;
    overflow : hidden;
    background-image : url(art/bj.png);
}

#game .hud .key1,
#game .hud .key2 {
    position : absolute;
    width : 16px;
    height : 32px;
    left : 480px;
    overflow : hidden;
    background-image : url(art/hudkeys.png);
}

#game .hud .key1 {
    top : 8px;
}
#game .hud .key2 {
    top : 40px;
    background-position : -16px 0;
}


#game .hud .weapon {
    position : absolute;
    width : 96px;
    height : 48px;
    left : 512px;
    top : 16px;
    overflow : hidden;
    background-image : url(art/hudweapons.png);
}

#game .hud .number-container {
    position : absolute;
    height : 32px;
    top : 32px;
}

#game .hud .floor {
    left : 48px;
}
#game .hud .score {
    left : 96px;
}
#game .hud .lives {
    left : 224px;
}
#game .hud .health {
    left : 336px;
}
#game .hud .ammo {
    left : 428px;
}


#game .hud .number {
    display : inline-block;
    width : 16px;
    height : 32px;
    overflow : hidden;
    margin : 0;
    background-image : url(art/hudnumbers.png);
    background-repeat : no-repeat;
}

#game .fps {
    position : absolute;
    display : none;
    z-index : 1000;
    left : 20px;
    top : 15px;
    font-family : courier new;
    font-size : 16px;
    width : 70px;
    height : 16px;
    background : rgba(0,0,0,0.3);
    color : rgb(200,200,200);
    padding : 5px;
}


#text-screen {
    background-color : #8a0000;
    position : absolute;
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    z-index : 500;
    display : none;
}

#game .intermission,
#game .gameover {
    position : absolute;
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    background-color : #004141;
    display : none;
}

#game .gameover {
    background-image : url(art/intermission_gameover.png);
}

#game .intermission > div {
    position : absolute;
}

#game .intermission .background,
#game .intermission .background-secret,
#game .intermission .background-victory {
    position : absolute;
    background-image : url(art/intermission.png);
    height : 100%;
    width : 100%;
    left : 0;
    top : 0;
    z-index : 0;
    display : none;
}
#game .intermission .background-secret {
    background-image : url(art/intermission_secret.png);
}
#game .intermission .background-victory {
    background-image : url(art/intermission_victory.png);
}

#game .intermission .bj {
    left : 40px;
    top : 32px;
    width : 162px;
    height : 174px;
    background-image : url(art/intermissionbj.png);
    overflow : hidden;
    z-index : 10;
}

#game .intermission .stat,
#game .intermission .victory-stat {
    z-index : 10;
}

#game .intermission .bonus {
    left : 412px;
    top : 108px;
}

#game .intermission .floor {
    left : 412px;
    top : 32px;
}


#game .intermission .total-time-minutes {
    top : 128px;
    left : 224px;
}

#game .intermission .total-time-seconds {
    top : 128px;
    left : 306px;
}


#game .intermission .time-minutes,
#game .intermission .par-minutes {
    left : 412px;
}

#game .intermission .time-seconds,
#game .intermission .par-seconds {
    left : 498px;
}

#game .intermission .time-minutes,
#game .intermission .time-seconds {
    top : 152px;
}

#game .intermission .par-minutes,
#game .intermission .par-seconds {
    top : 184px;
}

#game .intermission .kill-ratio,
#game .intermission .secret-ratio,
#game .intermission .treasure-ratio {
    left : 492px;
}
#game .intermission .kill-ratio {
    top : 224px;
}
#game .intermission .secret-ratio {
    top : 256px;
}
#game .intermission .treasure-ratio {
    top : 288px;
}

#game .intermission .avg-kill-ratio,
#game .intermission .avg-secret-ratio,
#game .intermission .avg-treasure-ratio {
    left : 384px;
}
#game .intermission .avg-kill-ratio {
    top : 224px;
}
#game .intermission .avg-secret-ratio {
    top : 256px;
}
#game .intermission .avg-treasure-ratio {
    top : 288px;
}

#game .intermission .digit {
    display : inline-block;
    width : 32px;
    height : 32px;
    background-image : url(art/intermissionfont.png);
    background-repeat : no-repeat;
    background-position : 32px 0px;
}
#game .intermission .num-0 {
    background-position : 0px 0px;
}
#game .intermission .num-1 {
    background-position : -32px 0px;
}
#game .intermission .num-2 {
    background-position : -64px 0px;
}
#game .intermission .num-3 {
    background-position : -96px 0px;
}
#game .intermission .num-4 {
    background-position : -128px 0px;
}
#game .intermission .num-5 {
    background-position : -160px 0px;
}
#game .intermission .num-6 {
    background-position : -192px 0px;
}
#game .intermission .num-7 {
    background-position : -224px 0px;
}
#game .intermission .num-8 {
    background-position : -256px 0px;
}
#game .intermission .num-9 {
    background-position : -288px 0px;
}

#menu div.menu {
    width : 100%;
    height : 100%;
}

#menu div.menu.main {
    background-image : url(art/menubg_main.png);
}
 
#menu div.menu.episodes {
    background-image : url(art/menubg_episodes.png);
}

#menu div.menu.levels {
    background-image : url(art/menubg_levels.png);
}

#menu div.menu.skill {
    background-image : url(art/menubg_skill.png);
}


#menu div.menu.sound {
    background-image : url(art/menubg_sound.png);
}

#menu div.menu.control {
    background-image : url(art/menubg_control.png);
}

#menu div.menu.customize {
    background-image : url(art/menubg_customize.png);
}

#menu ul {
    list-style : none;
    margin : 0;
    padding : 0;
    position : absolute;
}

#menu div.menu.main ul {
    left : 196px;
    top : 118px;
    width : 330px;
    height : 232px;
}

#menu div.menu.sound ul {
    left : 150px;
    top : 87px;
    width : 330px;
    height : 232px;
}

#menu div.menu.episodes ul {
    left : 44px;
    top : 100px;
    width : 550px;
    height : 240px;
}

#menu div.menu.skill ul {
    left : 144px;
    top : 186px;
    width : 384px;
    height : 128px;
}


#menu div.menu.levels ul {
    left : 90px;
    top : 110px;
    width : 256px;
    height : 240px;
}

#menu div.menu.control ul {
    left : 160px;
    top : 156px;
    width : 350px;
    height : 100px;
}

#menu div.menu.customize ul {
    left : 116px;
    top : 192px;
    width : 512px;
    height : 96px;
}


#menu ul.two-column{
    position : relative;
    float : left;
    width : 256px;
}

/* menu items */ 

#menu ul li div.button {
    display : block;
    height : 24px;
    cursor : pointer;
    margin-bottom : 8px;
    background-image : url(art/menuitems.png);
}

#menu li.newgame div.button {
    background-position : 0 0;
}
#menu li.active.newgame div.button {
    background-position : -384px 0;
}

#menu li.sound div.button {
    background-position : 0 -32px;
}
#menu li.active.sound div.button {
    background-position : -384px -32px;
}

#menu li.control div.button {
    background-position : 0 -64px;
}
#menu li.active.control div.button {
    background-position : -384px -64px;
}

#menu li.readthis div.button {
    background-position : 0 -96px;
}
#menu li.active.readthis div.button {
    background-position : -384px -96px;
}

#menu li.resumegame div.button {
    background-position : 0 -128px;
}
#menu li.active.resumegame div.button {
    background-position : -384px -128px;
}

#menu li.baby div.button {
    background-position : 0 -160px;
}
#menu li.active.baby div.button {
    background-position : -384px -160px;
}

#menu li.easy div.button {
    background-position : 0 -192px;
}
#menu li.active.easy div.button {
    background-position : -384px -192px;
}

#menu li.medium div.button {
    background-position : 0 -224px;
}
#menu li.active.medium div.button {
    background-position : -384px -224px;
}

#menu li.hard div.button {
    background-position : 0 -256px;
}
#menu li.active.hard div.button {
    background-position : -384px -256px;
}

#menu li.sfxoff {
    margin-bottom : 58px;
}

#menu li.sfxon div.button,
#menu li.musicon div.button,
#menu li.sfxoff div.button,
#menu li.musicoff div.button {
    margin-left : 48px;
    width : 256px;
}


#menu li.sfxon div.button,
#menu li.musicon div.button {
    background-position : 0 -288px;
}
#menu li.active.sfxon div.button,
#menu li.active.musicon div.button {
    background-position : -384px -288px;
}

#menu li.sfxoff div.button,
#menu li.musicoff div.button {
    background-position : 0 -320px;
}
#menu li.active.sfxoff div.button,
#menu li.active.musicoff div.button {
    background-position : -384px -320px;
}

#menu li.mouseenabled div.button {
    background-position : 0 -352px;
}
#menu li.active.mouseenabled div.button {
    background-position : -384px -352px;
}
#menu li.customize div.button {
    background-position : 0 -384px;
}
#menu li.active.customize div.button {
    background-position : -384px -384px;
}

#menu div.menu.episodes li div.button {
    height : 56px;
    width : 550px;
    background-image : url(art/menuitems_episodes.png);
}

#menu div.menu.episodes li.episode-0 div.button {
    background-position : 0 0;
}
#menu div.menu.episodes li.active.episode-0 div.button {
    background-position : 0 -56px;
}

#menu div.menu.episodes li.episode-1 div.button {
    background-position : 0 -112px;
}
#menu div.menu.episodes li.active.episode-1 div.button {
    background-position : 0 -168px;
}

#menu div.menu.episodes li.episode-2 div.button {
    background-position : 0 -224px;
}
#menu div.menu.episodes li.active.episode-2 div.button {
    background-position : 0 -280px;
}



#menu div.menu.levels li div.button {
    width : 256px;
    margin-bottom : 16px;
    background-image : url(art/menuitems_levels.png);
}

#menu li.level-0 div.button {
    background-position : 0 0;
}
#menu li.active.level-0 div.button {
    background-position : -256px 0;
}

#menu li.level-1 div.button {
    background-position : 0 -32px;
}
#menu li.active.level-1 div.button {
    background-position : -256px -32px;
}

#menu li.level-2 div.button {
    background-position : 0 -64px;
}
#menu li.active.level-2 div.button {
    background-position : -256px -64px;
}

#menu li.level-3 div.button {
    background-position : 0 -96px;
}
#menu li.active.level-3 div.button {
    background-position : -256px -96px;
}

#menu li.level-4 div.button {
    background-position : 0 -128px;
}
#menu li.active.level-4 div.button {
    background-position : -256px -128px;
}

#menu li.level-5 div.button {
    background-position : 0 -160px;
}
#menu li.active.level-5 div.button {
    background-position : -256px -160px;
}

#menu li.level-6 div.button {
    background-position : 0 -192px;
}
#menu li.active.level-6 div.button {
    background-position : -256px -192px;
}

#menu li.level-7 div.button {
    background-position : 0 -224px;
}
#menu li.active.level-7 div.button {
    background-position : -256px -224px;
}

#menu li.level-8 div.button{
    background-position : 0 -256px;
}
#menu li.active.level-8 div.button {
    background-position : -256px -256px;
}

#menu li.level-9 div.button {
    background-position : 0 -288px;
}
#menu li.active.level-9 div.button {
    background-position : -256px -288px;
}

/* menu toggle light */

#menu div.light {
    width : 42px;
    height : 16px;
    margin-left : -48px;
    margin-top : 4px;
    overflow : hidden;
    display : inline-block;
    background-image : url(art/menulight.png);
}

#menu div.light.on {
    background-position : 0 24px;
}

/* menu selector gun */

#menu ul.selector li.active::before {
    display : block;
    width : 46px;
    height : 24px;
    position : absolute;
    left : -50px;
    content : "";
    background-image : url(art/menuselector.png);
}


#menu div.menu.control ul.selector li.active::before {
    left : -100px;
}


/* customize keys menu */

#menu div.menu.customize ul.selector li.active::before {
    left : -96px;
}
#menu div.menu.customize li div.button {
    margin-bottom : 28px;
    background : none;
}

#menu div.menu.customize li div.button span {
    position : relative;
    display : inline-block;
    width : 122px;
    height : 28px;
    background-image : url(art/control_keys.png);
    background-position : 0 -128px;
    margin-right : -6px;
}
#menu div.menu.customize li div.button span.k1 {
}
#menu div.menu.customize li div.button span.k2 {
}
#menu div.menu.customize li div.button span.k3 {
}
#menu div.menu.customize li div.button span.k4 {
}

#menu div.menu.customize li div.button span:hover {
    
}

/* skill menu face */

#menu div.menu.skill div.face {
    width : 48px;
    height : 64px;
    left : 460px;
    top : 210px;
    position : absolute;
    background-image : url(art/skillfaces.png);
}

#menu div.menu.skill div.face.gd_baby {
    background-position : 0 0;
}
#menu div.menu.skill div.face.gd_easy {
    background-position : -48px 0;
}
#menu div.menu.skill div.face.gd_medium {
    background-position : -96px 0;
}
#menu div.menu.skill div.face.gd_hard {
    background-position : -144px 0;
}


/* menu confirm box */

#menu .message {
    position : absolute;
    z-index : 1000;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    display : none;
}

#menu .message.confirm-newgame div.box {
    position : absolute;
    width : 460px;
    height : 100px;
    left : 50%;
    top : 50%;
    margin-left : -230px;
    margin-top : -50px;
    overflow : hidden;
    background-image : url(art/confirm_newgame.png);
}

#menu .message.confirm-newgame div.box.blink {
    background-position : 0 100px;
}