html,body {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden;
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
    font-size: 12pt; font-weight: bold;
    background: #666; color: #100;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }

a:link, a:visited { color: #CAA; text-decoration: none; }
a:hover, a:active { color: #31df13; }

.tbl { display: table; width: 100%; height: auto; min-height: 100%; table-layout: fixed; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; border: 1px solid #606163; /*box-shadow: inset 0 0 2px 2px #000;*/ }

/*center { word-wrap: break-word; }*/

.scontainer .td { border: 0; }

.tr .hoover:hover {
    color: #066;
    /*background: #0f0;*/
    background: #BBB;
    cursor: pointer;
}

#bg {
    position: fixed; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background: url('/img/test.png') repeat left top transparent;
    background-size: cover;
    pointer-events: none;
}

#tblMain {
    /*margin-left: 200px;*/ /*width: calc(100% - 200px);*/
    position: relative; /*left: 200px; top: 0;*/ width: 100%;
    z-index: 500;
}

#sidebar {
    width: 200px; min-width: 200px; left: 0; z-index: 999;
    display: inline-block; position: fixed; height: calc(100% - 50px);
}

ul { margin: 0 0 0 16px; padding: 0; }
li { list-style: none; }

#palette {
    /*background: url('/img/palette1.png') no-repeat center center transparent;
    background-size: cover; */
    height: 50px; /* = 100% */
    width: 50px;
    position: fixed; top: 0; left: 0;
    z-index: 1000;
    image-rendering: pixelated;
}
#cnvImage {
    width: 50px; height: 50px;
    position: fixed; top: 0; left: 0;
    display: none;
    z-index: 1000;
}
#hitbox {
    width: 200px; height: 50px;
    position: absolute; top: 0; left: 0;
    z-index: 800;
    user-select: none;
}

#content {
    /*width: 100%; height: 100%;
    overflow: auto;*/
    width: 100%; height: auto; min-height: 100%;
    color: #FFF;
}

.stitle {
    /*margin: 25px 50px;
    padding: 25px 0;*/
    padding: 25px 0px;
    border: 2px solid #f0f;
    background: #555;
}


.spacer { height: 50px; /*background: #666;*/ }

.scontainer {
    /*margin: 25px 50px;*/
    /*border: 2px solid #ff0;*/
    text-align: left;
    background: #555;
}
.scontainer a {
    position: relative;
    /*display: inline-block;*/
}
.vidplace a {
    display: inline-block;
}

.pad18 {
    padding: 18px;
}
.thumb {
    width: 100%;
    height: auto;
    display: inline-block;
}
.thumb2 {
    width: 32.8%;
    height: auto;
    display: inline-block;
}
.thumb3 {
    width: 180px;
    height: auto;
    display: inline-block;
}
.thumbs {
    width: 240px; height: auto;
}


#selDir { color: #0f0; }
#selDirInfo { color: #4ff; }
/*
#wrap { width: 100%; height: 100%; display: flex; position: absolute; z-index: 9; }
#wrap #box { padding: 128px; background: #111113; margin: auto; display: inline-block; position: relative; }*/

#filsel {
    display: block; text-align: center;
    background: #0a03f5; cursor: pointer;
    width: 100%; height: auto; vertical-align: middle;
    /*border: 1px solid #f0f;*/
}

#bar {
    width: 100%;
    padding: 4px;
    position: relative;
}
#bar #progress {
    width: 0%; height: 100%;
    white-space: nowrap;
    background: #41d8a7;
    position: absolute; top: 0; left: 0;
}
#bar #status {
    width: 100%;
    padding: 4px;
    /*position: absolute; top: 0; left: 0;*/
    visibility: hidden;
}
#bar #status_front {
    /*color: #111;*/
    width: 100%;
    padding: 4px;
    position: absolute; top: 0; left: 0;
}

.left li { float: left; padding-right: 32px; margin-left: 8px;; list-style: disc; }

.btags { color: #5aaf00; }
.bfile { color: #0094ff; }

.frm { display: flex; flex-flow: row wrap; }
.frm span { width: 100%; }

.dim { color: #AAA; }

.mnuLight:link, .mnuLight:visited {
    /*color: #704;*/
    /*color: #661399;*/
    color: #e84ef1;
}
.pgLight:link, .pgLight:visited {
    color: #31df13;
}

.c { color: #e5712f; }
.s { color: #c0c0c0; }
.g { color: #fdf02b; }

.playpause {
    background: url('/img/playerpause.png') no-repeat center center transparent;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}

.vid {
    width: 100%;
}

.bigback {
    position: fixed; top: 20px; left: 60px; z-index: 2000;
}

input[type="button"] { -webkit-appearance: none; border-radius: 0; cursor: pointer; }
textarea {
    width: 100%;
    min-height: 50px;
    background: transparent;
    border: 1px solid #AAA;
    color: #fff;
    font-size: 12pt;
}

.txt { width: 75px; text-align: center; }

.mspace {
    margin-top: 50px;
}
#mnav {
    width: 100%;
}
.mbtn {
    width: 50px; height: 50px;
    background: #666;
    color: #fff;
    /*border: 0;*/
}

#fullscreen {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    color: #fff;
    z-index: 1001;
}
#fcontainer {
    background: #666;
    color: #fff;
    border: 3px solid #606;
    
}
#fvideo {
    width: 660px; height: auto;
}

.right {
    float: right;
}
.ts {
    color: #390aef;
}

#workList .td:nth-child(1) { width: 50px; }

.pink { color: #d522ad; }

.pfrm {
    padding: 15px;
}
.pin {
    border: 1px solid #100;
    padding: 5px;
    color: #311;
    user-select: none;
    cursor: default;
}