body {
    margin: 0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Verdana, sans-serif;
}
canvas { width: 100%; height: 100% }

.loader
{
    font-size:4vh;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background:black;
}
.loader.hidden
{
    display:none;
}

.loader-content
{
    position:absolute;
    top:50%;
    width:100%;
    transform:translateY(-50%);
}
.loader h1
{
    text-align:center;
    color:white;
}

.loader-progress
{
    position:relative;
    margin:20px auto;
    width:80%;
    height:50px;
    background:#555;
}

.loader-text
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}
.loader-progress span
{
    display:block;
    background:white;
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
}


.gui
{
    font-family:sans-serif;
    position:absolute;
    opacity:1;
    transition:opacity 1.0s ease 0.5s;
    z-index:3;
    bottom:0px;
    height:9vh;
    width:100%;
    background:rgba(0,0,0,0.5);
    font-size:5vh;
    color:white;
}

.hidden
{
    opacity:0;
}
.bones_attachments
{
    height:100%;
    position:relative;
    left:2vh;
    display:inline-block;
    text-align:center;
    margin:0px;
}
.bone_attachment
{
    position:relative;
    display:inline-block;
    height:5vh;
    margin:0px 0.7vh;
    width:5vh;
    background:rgba(255,255,255,0.5);
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(0,0,0,0.5);
    cursor:pointer;
}
.bone_attachment.selected
{
    border:1px solid rgba(255,255,255,0.5);
}
.punch { background:url(../gui/punch.png) center center no-repeat; background-size:80%; }
.stick { background:url(../gui/stick.png) center center no-repeat; background-size:100%; }
.hammer { background:url(../gui/hammer.png) center center no-repeat; background-size:100%; }

.bone_attachment .bone_attachment-hover
{
    display:none;
    width:auto;
    height:auto;
    padding:0.1em 0.2em;
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    text-transform:uppercase;
    font-size:0.3em;
     
}
.bone_attachment:hover .bone_attachment-hover
{
    display:block;
}

.staminabar
{
    pointer-events:none;
    display:inline-block;
    position:relative;
    top:50%;
    left:10vh;
    transform:translateY(-50%);
    width:10vw;
    background:#808080;
    height:5vh;
}
.staminabar_filled
{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:30%;
    height:100%;
    background:#c0c17e;
}
.life
{
    pointer-events:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:10px;
    text-transform:uppercase;
    text-shadow:0px 0px 2px #000;
}