.hudbutton{
background-color:#00000000;
background-image:url("hud.png");
width:64; height:64;
}

#subtxt{
position: relative;
}

#kw_forward{ background-position-x: -128px; }
#kw_fforward{ background-position-x: -192px; }
#kw_fbackward{ background-position-x: -256px; }
#kw_backward{ background-position-x: -320px; }
#kw_captions{ background-position-x: -384px; background-color: #a1a1a1; filter:grayscale(1); }
#kw_fullscreen{ background-position-x: -448px; }
#kw_keep{ background-position-x: 128px; }
#kw_reset{ background-position-x: 64px; }


body{background-size:100%;     background-repeat: round;}
.timeline{    height: 24;}
.bar{     position: relative;    top: 50%;    margin-top: -4;}


.controls{
    background-color: firebrick;
    display: inline-block; z-index:99
}

#video {
    border-left-color: white;
    border-top-color: silver;
    border-bottom-color: black;
    border-right-color: grey;
    border-width: 5px;
    border-style: solid;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.container .controls .timeline .bar{
    background: rgb(1, 1, 1);
    height: 4px;
    flex: 1;
}

.container .controls .timeline .bar .inner{
    background: #fe0;
    width: 0%;
    height: 100%;
}