#bottom-bar {
    xborder:1px solid red;

    height:15%;
    z-index:1;


    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;


    background-color: rgb(30, 30, 30);
    border-style: solid;
	border-image-source: url('../img/border_simple.png');
	border-image-slice: 200;
	border-image-width: 3em;
	border-image-outset: 0;
	border-image-repeat: round;
    box-shadow: inset 0px 0px 10px 10px rgba(0,0,0, 0.8);
    xborder-radius:5em 5em 4em 4em;
}

#bottom-bar > .tab {
    xborder:1px solid red;
    text-align: center;

    xflex-basis:100%;
    width:100%;
    max-width:150px;
    height:100%;

    display:flex;
    justify-content: center;
    align-items: center;

    xbackground-color:#364353;
    background-color:transparent;

    xborder-right: 1px solid rgba(0, 0, 0, 0.5);


    /* testing button bg for bottom tabs */
    display:flex;
	justify-content: center;
	align-items: center;

    ximage-rendering:pixelated;
    background-image: url('../img/button_fat.png');
    
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%;

    font-size:2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
	text-transform: uppercase;

    color:#ffffff;
    text-shadow: 0px 0px 10px orange, 0px 0px 5px rgb(160, 160, 160);
    
    xtransition: all 0.07s;

    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.9));
}



#bottom-bar :last-child {
    border-right:none;
}

#bottom-bar > .tab.selected {
    xbackground-color:#1e252e;
    xfilter:brightness(0.7);
    background-image: url('../img/button_fat_dark.png');
}

#bottom-bar > .tab > img {
    xborder:1px solid grey;
    xfilter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.9));
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 1)) 
            drop-shadow(0px 0px 5px rgba(0, 0, 0, 1))  sepia(100%) contrast(100%) brightness(100%);
    aspect-ratio:1/1;
    height:40%;
    ximage-rendering: pixelated;
    transition: all 0.1s;
    border-radius:5px;
    opacity: 0.7;
}

#bottom-bar > .tab.selected > img {
    xfilter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));
    xfilter:none;
    xopacity:1;
}

#bottom-bar > .tab.selected > img {
    xfilter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));
}

#bottom-bar > .tab.inv > img.full {
    xtransform: translateY(-10px);
    filter:none;
    xfilter: saturate(200%) brightness(0.5);
    transform: scale(1.5);

    xbackground-color:rgb(149, 0, 0);
    xbackground-color:rgba(255, 255, 255, 0.5);
}