html,body {
    margin: 0; padding: 0; box-sizing: border-box;
    width: 100%; height: auto; color: #d9dce3;   
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
    font-size: 10pt; background: #24314a;
}
:focus { outline: none !important; }

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

hr { border: 0; height: 2px; background: #5775cd; margin: 0; padding: 0; }
.media { max-width: 100%; width: auto; height: auto; padding: 0 !important; border-radius: 0 !important; }

a:link, a:visited { color: #d9dce3; text-decoration: none; border-radius: 1px; transition: color .2s ease, background .2s ease;}
a:hover, a:active { color: #f4f5f7; background: #5775cd; }

.btn:link, .btn:visited { display: inline-block; margin: 0; padding: 5px 10px; font-size: 10pt; }
    .bt { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
    .bb { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

#twily {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    background-attachment: fixed;
    /*background: url('../img/twily.png?v=2') no-repeat right 0 center #17181A;*/
    background: #24314a;
}
.tbl { display: table; table-layout: fixed; width: 100%; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: middle; }
/** { border: 1px solid #f0f; }*/
.listv .td:nth-child(1) { width: 48px; min-width: 48px; }
.listv .td:nth-child(3) { width: 96px; min-width: 96px; text-align: right; }
.listv .td:nth-child(4) { width: 96px; min-width: 96px; text-align: right; }

#container { position: absolute; top: 0; left: 0; width: 100%; height: auto; box-sizing: border-box; /*padding: 64px;*/ padding: 96px 32px 32px 32px; z-index: 3; }
.embed { width: calc(100% - 400px) !important; margin-left: 400px; padding: 64px 8px !important; }
    .action, .statsf { float: right; text-align: right; }
        .statsf { display: none; }
        #dirbtn { display: none; }
        .items { color: #73a2ff; padding-right: 8px; }
        .lastm { padding: 0 8px; }
        .fviews { background: url(../img/views.png) center right no-repeat; padding-right: 20px; margin-right: 8px; }

    #browse { display: flex; flex-flow: row wrap; justify-content: flex-start; /* center */ }
        .file, .dir {
            /*display: inline-block; min-width: 96px; min-height: 64px;*/ width: 100%; height: auto; display: inline-block; /*flex-flow: row wrap; align-items: center;*/
            /*text-align: center;*/ word-wrap: break-word; /*padding: 8px;*/
        }
        /*.file:active, .dir:active { padding-top: 9px; padding-bottom: 7px; }*/
            .icon { /*width: 100%;*/ height: 32px; /*margin-bottom: 8px; position: relative;*/ display: inline-block; padding: 0px 8px; }
                .icon img {
                    /*display: block;*/ max-width: 32px; max-height: 32px;
                    /*position: absolute;/* bottom: 0; left: 50%; transform: translateX(-50%); */
                    visibility: hidden;
                    padding-top: 3px;
                }
            .new { text-decoration: underline !important; }
            .hid img { opacity: .7; /* display: none !important; */ }
            .selected:link, .selected:visited                 { background: #5775cd; color: #f4f5f7 !important; }
            #browse .selected:link, #browse .selected:visited { background: #84BD3F; color: #24314a !important; }

.cleft {
    -moz-transform: scaleX(-1); -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1); transform: scaleX(-1);
    display: inline-block;
}
#copyleft { float: left; }
#contact  { float: right; }
#visits   { padding-top: 384px; text-align: center; color: #73a2ff; }
#top      { width: 100%; box-sizing: border-box; }

.arrow {
    position: fixed; right: 64px;/* left: 64px;*/
    background: #24314a;
    text-align: center;
    transition: background .2s ease;
    z-index: 20; cursor: pointer;
}
#top_arrow {
    display: none; top: 0;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
}
    #top_arrow:hover { background: #5775cd; }
#bot_arrow {
    display: none; bottom: 0;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}
    #bot_arrow:hover { background: #5775cd; }

#text {
    border: 0; border-radius: 1px;
    display: block; padding: 8px; box-sizing: border-box;
    background: #24314a; color: #f4f5f7;
    text-align: left; font-size: 10pt;
    position: relative; z-index: 10; transition: background .2s ease;
}
#text:hover { background: #1b1b28; }

#chat {
    border: 0; border-top-right-radius: 1px;
    position: fixed; bottom: 0; left: 0; padding: 1px;
    overflow: hidden; width: 400px; height: 200px /*calc(100% - 2px)*/;
    background: /*#17181A*/ transparent; transition: background .2s ease;
    z-index: 9; visibility: hidden;
}
#chat:hover { background: #1b1b28; }
    /*#backdrop {
        position: fixed; top: 0; left: 0;
        width: 400px; height: 100%;
        background: #1b1b28;
    }*/
    #chat_restore { display: none; position: fixed; left: 1px; bottom: 1px; }

#comment { width: 100%; height: auto; border: 0; background: transparent; }

#control {
    position: fixed;
    z-index: 100;
    top: 0; left: 0;
    background: transparent;
    width: auto;
    display: inline-block;
    opacity: 1;
    transition: opacity 1s ease;
}

#ifrm {
    width: 100%;
    height: 100%;
    min-height: 550px;
}

#toptitle {
    position: absolute; top: 0; left: 0; z-index: 1000;
    width: 100%;
    text-align: center;
}
h3 {
    font-style: italic;
    color: #00dcff;
}