DIV {
    margin:0;
    padding:0;
}
#servercontainer {
    width: 100%;
}

#wrapper {
    display: -webkit-flex;
    -webkit-justify-content: center;

    display: flex;
    justify-content: center;

}
/* flex issues? see: https://github.com/philipwalton/flexbugs */
#wrapper > DIV {
    -webkit-flex: 1;
    flex: 1;
    border:thin solid #777;
}
#wrapper DIV.bread {
    border-bottom:thin solid #777;
    margin: 10px;
}
#wrapper  LI {
    list-style-type: none;
    padding-left: 20px;
}
LI[filetype="-d"] {
    background: url("/WebApplications/ServerBrowser/images/d.png") no-repeat;
}
LI[filetype="-f"] {
    background: url("/WebApplications/ServerBrowser/images/f.png") no-repeat;
}
LI[filetype="ld"] {
    background: url("/WebApplications/ServerBrowser/images/ld.png") no-repeat;
}
LI[filetype="lf"] {
    background: url("/WebApplications/ServerBrowser/images/lf.png") no-repeat;
}

LI, LI SPAN {
    cursor: pointer;
}
LI SPAN.name {
    font-family: Consolas, "Courier New", Courier, monospace;
}
LI SPAN.size, LI SPAN.time {
    font-size: 80%;
}
LI SPAN.size:before {
    content: " [";
}
LI SPAN.size:after {
    content: "B] ";
}
LI SPAN.time:before {
    content: " @";
}
LI SPAN.time:after {
    content: " ";
}