@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/coolvetica.ttf');
    font-weight: normal;
    font-style: normal;
}

/* Reset styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        background: transparent;
        font-family:'Coolvetica','Helvetica';
}
:focus {
        outline: 0;
}
input {
        font-family:'Coolvetica','Helvetica';
}
#npcscriptfield, #npcscriptfield div, #npcscriptfield span {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

/* Containers */
body {background: #000000;}
#startscreen, #generalmessage, #deathscreen, #reconnectscreen, #errorscreen { position:absolute; left:0px; top:0px; width:100%; height: 100%; z-index:200; }
.parchment-back { width:844px; height:364px; position:absolute; top:55%; left:50%; margin-left:-422px; margin-top:-182px; font-size:20px; text-align:center; }
#underconstruction { font-size: 24px; color: #fffff0; margin-left:10px; margin-right:10px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 2px 0 #000, 1px 2px 0 #000; }
#generalmessage, #deathscreen, #reconnectscreen, #errorscreen { background-color:rgba(0,0,0,.25);  }

/* Scroll background */
.parchment-replacer { position:absolute; left:50%; top:0; width:692px; height:364px; margin-left:-346px; }

/* Logo */
#logo { position:absolute; background:url('../../files/gui/bbuilder_logosingle.png'); height:113px; width:454px; top:-90px; left:50%; margin-left:-229px; z-index:3; }

/* Play and revive buttons */    
#playbutton {margin:10px auto 10px auto;}
#playbutton div {position:absolute;top:0;left:0;opacity:1;-moz-transition:0.4s linear opacity;-webkit-transition:0.4s linear opacity;-o-transition:0.4s linear opacity;-ms-transition:0.4s linear opacity;transition:0.4s linear opacity}
#playbutton img { display:none; }
#playbutton.loading img {display:block;position:absolute;left:175px;top:90px;}
       
#respawnbutton { position:absolute; height:96px; width:259px; bottom:40px; left:50%; margin-left:-260px; background:url(../../files/gui/bbuilder_revive_revivebutton.png); }
#unstickmebutton { position:absolute; height:96px; width:258px; bottom:40px; left:50%; margin-left:2px; background:url(../../files/gui/bbuilder_revive_homebutton.png); }

#reconnectbutton { margin:10px auto 0 auto; background:url(../../files/gui/reconnectbutton.png); }

.startbutton { background:url(../../files/gui/playbutton.png);width:336px;height:180px; }
.startbutton:hover { background:url(../../files/gui/playbutton_active.png);  }
.startbutton.loading { background:none; }

/* Game */
#gamecontainer {width:100%;height:100%;margin-left:auto;margin-right:auto;position:absolute;overflow:hidden;}
#gamecontainer {-moz-transition:0.5s opacity linear 0.25s;-webkit-transition:0.5s opacity linear 0.25s;-o-transition:0.5s opacity linear 0.25s;-ms-transition:0.5s opacity linear 0.25s;transition:0.5s opacity linear 0.25s;}
canvas { position:absolute;image-rendering:optimizeSpeed;imageSmoothingEnabled:false;image-rendering:pixelated;}
#canvas {width:100%;height:100%;} 
#background { background: #000;}
#backgroundcontainer { display:inline-block; position:absolute; width:100%; height:100%; overflow:hidden;}
#background, #foreground { margin:0; padding:0;position:absolute;width:100%;height:100%;left:-32px;top:-32px;}
#guilayer { position:absolute; width:100%; height:100%; left:0px; top:0px; }   
#entities { image-rendering:optimizeSpeed;image-rendering:pixelated;imageSmoothingEnabled:false; width:100%; height:100%; left:0px; top:0px; }
#foreground { -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; }

#canvas, #bar-container, #minimap, #minimapcanvas, #foreground, #background, #gamecontainer, #movementhelp, #showvs, #showvsclans, #showvswinner, #showvsclanwinner {-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none;}

#bar-container { position:absolute; left:0; top:0; width:100%; height:100%; }

/* Minimap */
#minimap { position:absolute; right:8px; top:8px; width:144px; height:144px; }
#minimapcanvas {image-rendering:optimizeSpeed;imageSmoothingEnabled:false; width:144px; height:144px; border: 2px solid lightgray; border-radius: 4px; }

/* Chat */
#chatbox {background:url('../../files/gui/bbuilder_chatbar.png');position:absolute;z-index:100;height:32px;width:788px;max-width:90%;left:62px;top:16px;}
#chatbox input {font-size:20px;color:#eee;background:none;width:90%;border:0;margin-left:2%;padding:2px 0;}

#chatbox.bigchat {background:none;height:64px;width:100%;left:0px;right:0px;max-width:initial;top:120px;}
#chatbox.bigchat input {font-size:56px;height:64px;width:100%;margin-left:initial; color:white; text-align:center; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 2px 0 #000, 1px 2px 0 #000; }

/* Game GUI */
#movepad {background:url('../../files/gui/corleone_movepad.png') no-repeat bottom left;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute; left:0px;bottom:0px;width:300px;height:300px; opacity:0.6; }

#weaponpad {background:url('../../files/gui/corleone_weaponpad_fb.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute; right:0px;bottom:0px;width:128px;height:128px; }
/* .padmaxhalf { max-width:45vh; max-height:45vh; } */

#bombbutton {background:url('../../files/gui/bbuilder_bombbutton.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#bombbutton {right:0px; bottom: 120px; width:96px;height:96px; max-width:20vh; max-height:20vh; }
#lightsbutton { display:none; background:url('../../files/gui/bbuilder_carbutton_lights.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#mode2button { display:none; background:url('../../files/gui/2ndmode-hotkey.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#lightsbutton, #mode2button {right:93px; bottom: 91px; width:96px;height:96px; max-width:20vh; max-height:20vh; }
#hornbutton { display:none; background:url('../../files/gui/bbuilder_carbutton_horn.png') no-repeat bottom right;background-size:contain;image-rendering:-moz-crispt-edges;position:absolute;}
#hornbutton {right:125px; bottom: 0px; width:96px;height:96px; max-width:20vh; max-height:20vh; }

.scrollable { overflow-y:auto; } /* -webkit-overflow-scrolling: touch; */

/* Input placeholder color */
::-webkit-input-placeholder { color: #BBB; }
:-moz-placeholder { color: #BBB; opacity: 1; }
::-moz-placeholder { color: #BBB; opacity: 1; }
:-ms-input-placeholder { color: #BBB; }
::-ms-input-placeholder { color: #BBB; }

/* Health bar */

#healthbar {height:26px;width:204px;left:50%;margin-left:-102px;top:4px;position:absolute;pointer-events: none;}

#healthbarbar { position:absolute;width:100%; height:100%; background:url('../../files/gui/bbuilder_healthbar.png'); image-rendering:-moz-crisp-edges; }
#hitpoints {width:0px;height:22px;top:2px;left:22px;position:absolute;background:#d83939;-moz-transition:.5s width ease;-webkit-transition:.5s width ease;-o-transition:.5s width ease;-ms-transition:.5s width ease;transition:.5s width ease;pointer-events: none;}