/* http://dev.w3.org/csswg/css-device-adapt/
 *   - OFC, is ignored (mostly) by current browsers :(
 *   - you have to rely on html meta crap :(
 *   - Chrome fucks this up pretty bad!
@viewport { width: extend-to-zoom; zoom: 1.0; }
@viewport { width: 320px; }
@viewport { width: device-width; }

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

@media screen and (max-device-width: 320px) {@viewport {width: 320px; zoom: 1.0;}}
@media screen and (device-width: 480px) {@viewport {width: 480px; zoom: 1.0;}}

*/

:root {
  color-scheme: light dark;
}

:root {
    /* Solarized: https://ethanschoonover.com/solarized/ */
    --solarized-base03:   #002b36; /* background tones */   /* dark: background */
    --solarized-base02:   #073642;                          /* dark: background highlights */
    --solarized-base01:   #586e75; /* content tones */      /* dark: comments, secondary content */              /* light: optional emphasized content */
    --solarized-base00:   #657b83;                                                                               /* light: body text, default code, primary content */
    --solarized-base0:    #839496;                          /* dark: body text, default code, primary content */
    --solarized-base1:    #93a1a1;                          /* dark: optional emphasized content */              /* light: comments, secondary content */
    --solarized-base2:    #eee8d5; /* background tones */                                                        /* light: background highlights */
    --solarized-base3:    #fdf6e3;                                                                               /* light: background */
    --solarized-yellow:   #b58900; /* accent colors */
    --solarized-orange:   #cb4b16;
    --solarized-red:      #dc322f;
    --solarized-magenta:  #d33682;
    --solarized-violet:   #6c71c4;
    --solarized-blue:     #268bd2;
    --solarized-cyan:     #2aa198;
    --solarized-green:    #859900;
    --solarized-brblack:  var(--solarized-base03);
    --solarized-black:    var(--solarized-base02);
    --solarized-brgreen:  var(--solarized-base01);
    --solarized-bryellow: var(--solarized-base00);
    --solarized-brblue:   var(--solarized-base0);
    --solarized-brcyan:   var(--solarized-base1);
    --solarized-white:    var(--solarized-base2);
    --solarized-brwhite:  var(--solarized-base3);
    /* baseline Material color theme: https://material.io/design/color/the-color-system.html#color-theme-creation */
    --material-primary: #6000ee;
    --material-primary-variant: #3700b3;
    --material-secondary: #03dac6;
    --material-secondary-variant: #018786;
    --material-background: #fff;
    --material-surface: #fff;
    --material-error: #b00020;
    --material-on-primary: #fff;
    --material-on-secondary: #000;
    --material-on-background: #000;
    --material-on-surface: #000;
    --material-on-error: #fff;
}

:root, .light:root, .light {
    --primary-color: #333;
    --secondary-color: #999;
    --secondary-background: rgba(208, 210, 194, 0.5);
    --background-color: #f9f9f9;
    --background-highlights: #f0f0f0;
    --highlights-color: #242;
    --link-color: #33c;
    --visited-link-color: #939;
    --active-link-color: #f60;
    --active-accent-color: #f63;
    --msg-color: #444;
    --msg-background-color: #ffe0b2;
    --shadow-color: #ddd;
    --accent-color: #263238;
    --accent-background: #fff9c4;
    --accent-shadow-color: #e0e0e0;
    --error-background: #C62828;
    --error-color: #fce4ec;
/*
    --selection-background-color: hsl(216deg 100% 50% / 30%);
    --selection-color: inherit;
*/
}
.dark:root, .dark {
    --primary-color: #fafafa;
    --secondary-color: #bdbdbd;
    --background-color: #212121;
    --secondary-background: rgba(74, 74, 70, 0.5);
    --background-highlights: #2a2a2a;
    --highlights-color: #b2ebf2;
    --link-color: #5cbff5;
    --visited-link-color: #c4a6ca;
    --active-link-color: #ff95b9;
    --active-accent-color: #e57373;
    --shadow-color: #333;
    --accent-color: #e8dddc;
    --accent-background: #2f3535;
    --accent-shadow-color: #4a4a4a;
    --error-background: #501e1e;
    --error-color: #ffcdd2;
    --msg-color: #dbe3e6;
    --msg-background-color: #40474c;
}
.solarized:root, .solarized {
    --link-color: var(--solarized-blue);
    --visited-link-color: var(--solarized-magenta);
    --active-link-color: var(--solarized-red);
    --active-accent-color: var(--solarized-orange);
    --mark-background-color: var(--background-highlights);
    --error-background: var(--solarized-red);
    --error-color: var(--solarized-brwhite);
}
.solarized:root, .solarized.light:root, .solarized.light {
    --primary-color: var(--solarized-base00);
    --secondary-color: var(--solarized-base1);
    --background-color: var(--solarized-base3);
    --background-highlights: var(--solarized-base2);
    --highlights-color: var(--solarized-base01);
    --shadow-color: #e2e2e2;
}
.solarized.dark:root, .solarized.dark {
    --primary-color: var(--solarized-base0);
    --secondary-color: var(--solarized-base01);
    --background-color: var(--solarized-base03);
    --background-highlights: var(--solarized-base02);
    --highlights-color: var(--solarized-base1);
    --shadow-color: #292929;
}
/*
.material.light:root, .material:root, .material.light {
    --primary-color: #;
    --secondary-color: #;
    --background-color: #;
    --background-highlights: ;
    --highlights-color: #;
    --link-color: #;
    --visited-link-color: #;
    --active-link-color: #;
    --active-accent-color: #;
    --shadow-color: #282828;
    --mark-background-color: #;
}
.material.dark:root, .material.dark {
    --primary-color: #fafafa;
    --secondary-color: #303030;
    --background-color: #212121;
    --background-highlights: #424242;
    --highlights-color: #fff;
    --link-color: #;
    --visited-link-color: #;
    --active-link-color: #;
    --active-accent-color: #;
    --shadow-color: #282828;
    --mark-background-color: #;
}
*/

:root {
  --outline-size: max(2px, 0.08em);
  --outline-style: auto;
  --outline-color: var(--active-accent-color, currentColor);
  --outline-offset: var(--outline-size);
}

html {
    color: var(--primary-color);
    background-color: var(--background-color);
    font-family: sans-serif;
    text-rendering: optimizeLegibility;
    accent-color: var(--accent-color);
}

body {
    line-height: 1.4em;
    margin:0;
    padding:2px 4px;
}

@media (hover: hover) {
    body {padding-bottom:1.5rem} /* use keyboard to focus link on bottom: chrome's status bar keeps masking */
}

::selection {
    text-shadow: none;
    background-color: var( --selection-background-color, hsl(216deg 100% 50% / 30%) );
/* -- DON'T! if set, browsers will protect visited links, returning them to default aspect!
    color: var(--selection-color, inherit);
*/
}

a {text-decoration: none;}

a:link {color: var(--link-color)}

a:visited {color: var(--visited-link-color)}

a:hover {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 0.17em;
    text-underline-offset: 0.17em;
}

mark {
 background-color:var(--mark-background-color,var(--background-highlights,#ff0));
 color:var(--mark-color,var(--highlights-color,#00f));
}
mark.perfect {
  text-decoration: underline;
  text-decoration-color: var(--link-color, #ff0);
}

input:not([type="image"]),
select option,
textarea
{
  background-color: var(--background-color);
  color: var(--primary-color);
  border: 1px inset var(--shadow-color);
  padding: .3ex .5em;
}

button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"]
{
  background-color: var(--background-highlights);
  color: var(--primary-color);
  border: 1px outset var(--shadow-color);
  padding: .5ex .5em;
  box-shadow: var(--shadow-color) 0 0 1em 2px;
}

a:active,
a:hover,
a:focus
{color: var(--active-link-color)}

:is(a,button,input,select,textarea,summary):focus-visible,
:is(button,input,select,textarea):hover
{
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset);
}

h2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: larger;
    line-height: 1.1;
    margin: .5rem 4px 1rem 4px;
}

.foot {
    font-size: smaller;
    padding-top: 1ex;
    color: var(--secondary-color);
    text-align: right;
}

/* protecting Nokia E51's old Safari, and hopefully other old farts that do not understand media queries */
@media all and (min-device-width: 1px) {
    .list > table {
        width: 100%;
        table-layout:fixed;
        box-sizing:border-box;
    }
    .list th.s, .list td.s {width:5em;}
    .list th.m, .list td.m {width:10em}
    .list th.t, .list td.t {width:12em}
}

.list > table > thead > tr > th,
.list > table > thead > tr > th a {
    color: inherit;
    text-align: right;
    font-weight: normal;
    font-size: 90%;
    vertical-align: middle;
}

.list > table > thead > tr > th .sortarrow {color: var(--active-accent-color)}

.list > table > tbody > tr > td {
    vertical-align: baseline;
    color: var(--secondary-color);
    text-align: right;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media (max-width: 425px) {
  .list > table > tbody > tr > td,
  h2
  {
    white-space: normal;
    word-break:  break-word;
  }
}

h2:focus-within,
.list > table > tbody > tr:focus-within > td
{
  white-space: normal;
  word-break:  break-all;
}

.list > table > tbody > tr:hover {outline: 1px dotted var(--active-accent-color)}

.list th.n,
.list td.n {
    text-align:left;
}
.list td.m,
.list td.s,
.list td.t {
    padding-left: .5em;
    font-size: smaller;
}
.list td.m,
.list td.s
{
    font-family:monospace;
}

.list > table > tfoot > tr > td:not(:empty) {
    border-top: 1px solid var(--secondary-color);
    color: var(--highlights-color);
    text-align: right;
    font-size: smaller;
}

@media all and (max-width: 1700px) {
    .list th.t, .list td.t {display: none;}
}
@media all and (max-width: 600px) {
    .list th.m, .list td.m {display: none;}
}
@media all and (max-width: 319px) {
    .list th.s, .list td.s {display: none;}
}

.list .no-size th.s, .list .no-size td.s {display: none}

.list > table > tbody > tr:nth-of-type(odd)  {background-color: var(--background-color)}
.list > table > tbody > tr:nth-of-type(even) {background-color: var(--background-highlights)}

.list > table > tbody > tr:hover > td,
.list > table > tbody > tr > td.inline
{color: var(--primary-color)}

.list tbody td.n > a:first-child::before {
    display: inline-block;
    content: " ";
    width: 22px;
    height: 20px;
    vertical-align: middle;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-image: url(/icons/page_white.png);
    opacity: 0.5;
}
.list tbody tr:focus-within > td.n > a:first-child::before,
.list tbody td.n > a:first-child:active::before,
.list tbody td.n > a:first-child:focus::before,
.list tbody td.n > a:first-child:hover::before {
    opacity: 1;
}

.list tbody td.n a[href$="/"]:first-child {
    font-weight: bold;
}
.list tbody td.n a[href$="/"]:first-child::before {
    background-image: url(/icons/folder.png);
}
.list tbody td.n a[href="../"]:first-child {
    text-transform: lowercase;
    font-weight: normal;
}
.list tbody td.n a[href="../"]:first-child::before {
    background-image: url(/icons/arrow_turn_left.png);
}
.list tbody td.n a[href*="altblue"]:first-child::before {
  background-image: url(/ab.png);
  background-size: contain;
}
.list tbody td.n a[href$=".000"]:first-child::before,
.list tbody td.n a[href$=".001"]:first-child::before,
.list tbody td.n a[href$=".002"]:first-child::before,
.list tbody td.n a[href$=".003"]:first-child::before,
.list tbody td.n a[href$=".004"]:first-child::before,
.list tbody td.n a[href$=".005"]:first-child::before,
.list tbody td.n a[href$=".006"]:first-child::before,
.list tbody td.n a[href$=".007"]:first-child::before,
.list tbody td.n a[href$=".008"]:first-child::before,
.list tbody td.n a[href$=".009"]:first-child::before,
.list tbody td.n a[href$=".7z" ]:first-child::before,
.list tbody td.n a[href$=".bz2"]:first-child::before,
.list tbody td.n a[href$=".gz" ]:first-child::before,
.list tbody td.n a[href$=".rar"]:first-child::before,
.list tbody td.n a[href$=".r00"]:first-child::before,
.list tbody td.n a[href$=".r01"]:first-child::before,
.list tbody td.n a[href$=".r02"]:first-child::before,
.list tbody td.n a[href$=".r03"]:first-child::before,
.list tbody td.n a[href$=".r04"]:first-child::before,
.list tbody td.n a[href$=".r05"]:first-child::before,
.list tbody td.n a[href$=".r06"]:first-child::before,
.list tbody td.n a[href$=".r07"]:first-child::before,
.list tbody td.n a[href$=".r08"]:first-child::before,
.list tbody td.n a[href$=".r09"]:first-child::before,
.list tbody td.n a[href$=".r10"]:first-child::before,
.list tbody td.n a[href$=".r11"]:first-child::before,
.list tbody td.n a[href$=".r12"]:first-child::before,
.list tbody td.n a[href$=".r13"]:first-child::before,
.list tbody td.n a[href$=".r14"]:first-child::before,
.list tbody td.n a[href$=".r15"]:first-child::before,
.list tbody td.n a[href$=".r16"]:first-child::before,
.list tbody td.n a[href$=".r17"]:first-child::before,
.list tbody td.n a[href$=".r18"]:first-child::before,
.list tbody td.n a[href$=".r19"]:first-child::before,
.list tbody td.n a[href$=".r20"]:first-child::before,
.list tbody td.n a[href$=".r21"]:first-child::before,
.list tbody td.n a[href$=".r22"]:first-child::before,
.list tbody td.n a[href$=".r23"]:first-child::before,
.list tbody td.n a[href$=".r24"]:first-child::before,
.list tbody td.n a[href$=".r25"]:first-child::before,
.list tbody td.n a[href$=".r26"]:first-child::before,
.list tbody td.n a[href$=".r27"]:first-child::before,
.list tbody td.n a[href$=".r28"]:first-child::before,
.list tbody td.n a[href$=".r29"]:first-child::before,
.list tbody td.n a[href$=".r30"]:first-child::before,
.list tbody td.n a[href$=".r31"]:first-child::before,
.list tbody td.n a[href$=".r32"]:first-child::before,
.list tbody td.n a[href$=".r33"]:first-child::before,
.list tbody td.n a[href$=".r34"]:first-child::before,
.list tbody td.n a[href$=".r35"]:first-child::before,
.list tbody td.n a[href$=".r36"]:first-child::before,
.list tbody td.n a[href$=".r37"]:first-child::before,
.list tbody td.n a[href$=".r38"]:first-child::before,
.list tbody td.n a[href$=".r39"]:first-child::before,
.list tbody td.n a[href$=".r30"]:first-child::before,
.list tbody td.n a[href$=".r41"]:first-child::before,
.list tbody td.n a[href$=".r42"]:first-child::before,
.list tbody td.n a[href$=".r43"]:first-child::before,
.list tbody td.n a[href$=".r44"]:first-child::before,
.list tbody td.n a[href$=".r45"]:first-child::before,
.list tbody td.n a[href$=".r46"]:first-child::before,
.list tbody td.n a[href$=".r47"]:first-child::before,
.list tbody td.n a[href$=".r48"]:first-child::before,
.list tbody td.n a[href$=".r49"]:first-child::before,
.list tbody td.n a[href$=".r40"]:first-child::before,
.list tbody td.n a[href$=".r41"]:first-child::before,
.list tbody td.n a[href$=".r42"]:first-child::before,
.list tbody td.n a[href$=".r43"]:first-child::before,
.list tbody td.n a[href$=".r44"]:first-child::before,
.list tbody td.n a[href$=".r45"]:first-child::before,
.list tbody td.n a[href$=".r46"]:first-child::before,
.list tbody td.n a[href$=".r47"]:first-child::before,
.list tbody td.n a[href$=".r48"]:first-child::before,
.list tbody td.n a[href$=".r49"]:first-child::before,
.list tbody td.n a[href$=".r50"]:first-child::before,
.list tbody td.n a[href$=".r51"]:first-child::before,
.list tbody td.n a[href$=".r52"]:first-child::before,
.list tbody td.n a[href$=".r53"]:first-child::before,
.list tbody td.n a[href$=".r54"]:first-child::before,
.list tbody td.n a[href$=".r55"]:first-child::before,
.list tbody td.n a[href$=".r56"]:first-child::before,
.list tbody td.n a[href$=".r57"]:first-child::before,
.list tbody td.n a[href$=".r58"]:first-child::before,
.list tbody td.n a[href$=".r59"]:first-child::before,
.list tbody td.n a[href$=".r60"]:first-child::before,
.list tbody td.n a[href$=".r61"]:first-child::before,
.list tbody td.n a[href$=".r62"]:first-child::before,
.list tbody td.n a[href$=".r63"]:first-child::before,
.list tbody td.n a[href$=".r64"]:first-child::before,
.list tbody td.n a[href$=".r65"]:first-child::before,
.list tbody td.n a[href$=".r66"]:first-child::before,
.list tbody td.n a[href$=".r67"]:first-child::before,
.list tbody td.n a[href$=".r68"]:first-child::before,
.list tbody td.n a[href$=".r69"]:first-child::before,
.list tbody td.n a[href$=".r70"]:first-child::before,
.list tbody td.n a[href$=".r71"]:first-child::before,
.list tbody td.n a[href$=".r72"]:first-child::before,
.list tbody td.n a[href$=".r73"]:first-child::before,
.list tbody td.n a[href$=".r74"]:first-child::before,
.list tbody td.n a[href$=".r75"]:first-child::before,
.list tbody td.n a[href$=".r76"]:first-child::before,
.list tbody td.n a[href$=".r77"]:first-child::before,
.list tbody td.n a[href$=".r78"]:first-child::before,
.list tbody td.n a[href$=".r79"]:first-child::before,
.list tbody td.n a[href$=".r80"]:first-child::before,
.list tbody td.n a[href$=".r81"]:first-child::before,
.list tbody td.n a[href$=".r82"]:first-child::before,
.list tbody td.n a[href$=".r83"]:first-child::before,
.list tbody td.n a[href$=".r84"]:first-child::before,
.list tbody td.n a[href$=".r85"]:first-child::before,
.list tbody td.n a[href$=".r86"]:first-child::before,
.list tbody td.n a[href$=".r87"]:first-child::before,
.list tbody td.n a[href$=".r88"]:first-child::before,
.list tbody td.n a[href$=".r89"]:first-child::before,
.list tbody td.n a[href$=".r90"]:first-child::before,
.list tbody td.n a[href$=".r91"]:first-child::before,
.list tbody td.n a[href$=".r92"]:first-child::before,
.list tbody td.n a[href$=".r93"]:first-child::before,
.list tbody td.n a[href$=".r94"]:first-child::before,
.list tbody td.n a[href$=".r95"]:first-child::before,
.list tbody td.n a[href$=".r96"]:first-child::before,
.list tbody td.n a[href$=".r97"]:first-child::before,
.list tbody td.n a[href$=".r98"]:first-child::before,
.list tbody td.n a[href$=".r99"]:first-child::before,
.list tbody td.n a[href$=".xz" ]:first-child::before,
.list tbody td.n a[href$=".zip"]:first-child::before
{
    background-image: url(/icons/compress.png);
}
.list tbody td.n a[href$=".aac"]:first-child::before,
.list tbody td.n a[href$=".ac3"]:first-child::before,
.list tbody td.n a[href$=".ape"]:first-child::before,
.list tbody td.n a[href$=".flac"]:first-child::before,
.list tbody td.n a[href$=".m4a"]:first-child::before,
.list tbody td.n a[href$=".m4b"]:first-child::before,
.list tbody td.n a[href$=".mp3"]:first-child::before,
.list tbody td.n a[href$=".mpc"]:first-child::before,
.list tbody td.n a[href$=".ogg"]:first-child::before,
.list tbody td.n a[href$=".opus"]:first-child::before,
.list tbody td.n a[href$=".wav"]:first-child::before,
.list tbody td.n a[href$=".wma"]:first-child::before
{
    background-image: url(/icons/sound.png);
}
.list tbody td.n a[href$=".asf"]:first-child::before,
.list tbody td.n a[href$=".avi"]:first-child::before,
.list tbody td.n a[href$=".flv"]:first-child::before,
.list tbody td.n a[href$=".m4v"]:first-child::before,
.list tbody td.n a[href$=".mkv"]:first-child::before,
.list tbody td.n a[href$=".mov"]:first-child::before,
.list tbody td.n a[href$=".mp4"]:first-child::before,
.list tbody td.n a[href$=".mpg"]:first-child::before,
.list tbody td.n a[href$=".ogv"]:first-child::before,
.list tbody td.n a[href$=".ts"]:first-child::before,
.list tbody td.n a[href$=".TS"]:first-child::before,
.list tbody td.n a[href$=".vob"]:first-child::before,
.list tbody td.n a[href$=".VOB"]:first-child::before,
.list tbody td.n a[href$=".webm"]:first-child::before,
.list tbody td.n a[href$=".wmv"]:first-child::before
{
    background-image: url(/icons/film.png);
}
.list tbody td.n a[href$=".gif"]:first-child::before,
.list tbody td.n a[href$=".heic"]:first-child::before,
.list tbody td.n a[href$=".heif"]:first-child::before,
.list tbody td.n a[href$=".ico"]:first-child::before,
.list tbody td.n a[href$=".jpg"]:first-child::before,
.list tbody td.n a[href$=".jpeg"]:first-child::before,
.list tbody td.n a[href$=".png"]:first-child::before,
.list tbody td.n a[href$=".webp"]:first-child::before
{
    background-image: url(/icons/image.png);
}
.list tbody td.n a[href$=".css"]:first-child::before {
    background-image: url(/icons/css.png);
}
.list tbody td.n a[href$=".htm"]:first-child::before,
.list tbody td.n a[href$=".html"]:first-child::before {
    background-image: url(/icons/page_white_code.png);
}
.list tbody td.n a[href$=".js"]:first-child::before {
    background-image: url(/icons/script.png);
}
.list tbody td.n a[href$=".pl"]:first-child::before,
.list tbody td.n a[href$=".pm"]::before,
.list tbody td.n a[href$=".t"]::before
{
    background-image: url(/icons/perl.png);
}
.list tbody td.n a[href$=".swf"]:first-child::before {
    background-image: url(/icons/page_white_flash.png);
}
.list tbody td.n a[href$=".diff"]:first-child::before,
.list tbody td.n a[href$=".patch"]:first-child::before
{
    background-image: url(/icons/page_edit.png);
}
.list tbody td.n a[href$=".xml"]:first-child::before,
.list tbody td.n a[href$=".xsl"]:first-child::before,
.list tbody td.n a[href$=".rdf"]:first-child::before,
.list tbody td.n a[href$=".rss"]:first-child::before,
.list tbody td.n a[href$=".opml"]:first-child::before
{
    background-image: url(/icons/page_white_code_red.png);
}
.list tbody td.n a[href$=".sh"]:first-child::before,
.list tbody td.n a[href$=".py"]:first-child::before,
.list tbody td.n a[href$=".rb"]:first-child::before,
.list tbody td.n a[href$=".tcl"]:first-child::before,
.list tbody td.n a[href$=".tk"]:first-child::before,
.list tbody td.n a[href$=".xpi"]:first-child::before,
.list tbody td.n a[href$=".reg"]:first-child::before
{
    background-image: url(/icons/page_gear.png);
}
.list tbody td.n a[href$="CHANGES"]:first-child::before,
.list tbody td.n a[href$="CHANGELOG"]:first-child::before,
.list tbody td.n a[href$="ChangeLog"]:first-child::before,
.list tbody td.n a[href$="COPYING"]:first-child::before,
.list tbody td.n a[href$="LICENSE"]:first-child::before,
.list tbody td.n a[href$="NOTES"]:first-child::before,
.list tbody td.n a[href$="README"]:first-child::before,
.list tbody td.n a[href$="TODO"]:first-child::before,
.list tbody td.n a[href$=".pod"]:first-child::before,
.list tbody td.n a[href$=".txt"]:first-child::before,
.list tbody td.n a[href$=".TXT"]:first-child::before,
.list tbody td.n a[href$=".diz"]:first-child::before,
.list tbody td.n a[href$=".DIZ"]:first-child::before,
.list tbody td.n a[href$=".nfo"]:first-child::before,
.list tbody td.n a[href$=".NFO"]:first-child::before
{
    background-image: url(/icons/page_white_text.png);
}
.list tbody td.n a[href$=".cf"]:first-child::before,
.list tbody td.n a[href$=".conf"]:first-child::before
{
    background-image: url(/icons/page_white_wrench.png);
}
.list tbody td.n a[href$=".exe"]:first-child::before,
.list tbody td.n a[href$=".EXE"]:first-child::before
{
    background-image: url(/icons/application.png);
}
.list tbody td.n a[href$=".pdf"]:first-child::before
{
    background-image: url(/icons/page_white_acrobat.png);
}
.list tbody td.n a[href$=".chm"]:first-child::before
{
    background-image: url(/icons/help.png);
}
.list tbody td.n a[href$=".doc"]:first-child::before,
.list tbody td.n a[href$=".docx"]:first-child::before,
.list tbody td.n a[href$=".odt"]:first-child::before,
.list tbody td.n a[href$=".ott"]:first-child::before,
.list tbody td.n a[href$=".rtf"]:first-child::before
{
    background-image: url(/icons/page_white_word.png);
}
.list tbody td.n a[href$=".xls"]:first-child::before,
.list tbody td.n a[href$=".xlsx"]:first-child::before,
.list tbody td.n a[href$=".ods"]:first-child::before,
.list tbody td.n a[href$=".ots"]:first-child::before
{
    background-image: url(/icons/page_white_excel.png);
}
.list tbody td.n a[href$=".pps"]:first-child::before,
.list tbody td.n a[href$=".ppt"]:first-child::before,
.list tbody td.n a[href$=".pptx"]:first-child::before,
.list tbody td.n a[href$=".odp"]:first-child::before,
.list tbody td.n a[href$=".otp"]:first-child::before
{
    background-image: url(/icons/page_white_powerpoint.png);
}
.list tbody td.n a[href$=".odg"]:first-child::before,
.list tbody td.n a[href$=".otg"]:first-child::before
{
    background-image: url(/icons/page_white_paint.png);
}
.list tbody td.n a[href$=".odi"]:first-child::before,
.list tbody td.n a[href$=".oti"]:first-child::before
{
    background-image: url(/icons/page_white_picture.png);
}
.list tbody td.n a[href$=".odc"]:first-child::before,
.list tbody td.n a[href$=".otc"]:first-child::before
{
    background-image: url(/icons/chart_bar.png);
}
.list tbody td.n a[href$=".oth"]:first-child::before
{
    background-image: url(/icons/page_white_world.png);
}
.list tbody td.n a[href$=".csv"]:first-child::before,
.list tbody td.n a[href$=".tsv"]:first-child::before
{
    background-image: url(/icons/text_columns.png);
}
.list tbody td.n a[href$=".mobi"]:first-child::before,
.list tbody td.n a[href$=".djvu"]:first-child::before,
.list tbody td.n a[href$=".epub"]:first-child::before,
.list tbody td.n a[href$=".azw3"]:first-child::before
{
    background-image: url(/icons/book.png);
}
.list tbody td.n a[href$=".asc"]:first-child::before,
.list tbody td.n a[href$=".md5"]:first-child::before,
.list tbody td.n a[href$=".sfv"]:first-child::before,
.list tbody td.n a[href$=".sha"]:first-child::before,
.list tbody td.n a[href$="MD5SUM"]:first-child::before,
.list tbody td.n a[href$="SHA256SUM"]:first-child::before,
.list tbody td.n a[href$="SHA512SUM"]:first-child::before,
.list tbody td.n a[href$="SHA1SUM"]:first-child::before
{
    background-image: url(/icons/text_signature.png);
}
.list tbody td.n a[href$=".jar"]:first-child::before
{
    background-image: url(/icons/page_white_cup.png);
}
.list tbody td.n a[href$=".iso"]:first-child::before,
.list tbody td.n a[href$=".ISO"]:first-child::before,
.list tbody td.n a[href$=".daa"]:first-child::before,
.list tbody td.n a[href$=".DAA"]:first-child::before,
.list tbody td.n a[href$=".uif"]:first-child::before,
.list tbody td.n a[href$=".UIF"]:first-child::before,
.list tbody td.n a[href$=".nrg"]:first-child::before,
.list tbody td.n a[href$=".NRG"]:first-child::before,
.list tbody td.n a[href$=".cue"]:first-child::before,
.list tbody td.n a[href$=".CUE"]:first-child::before
{
    background-image: url(/icons/page_white_cd.png);
}

.highlight {
  transition-property: color, background-color;
  transition-duration: 2s;
  color: var(--accent-color);
  background-color: var(--accent-background);
}

.readme {
  padding: .2em 1em;
  margin: .5em 0;
  color: var(--highlights-color);
  background-color: var(--background-highlights);
}
@media all and (min-width: 640px) {
  .readme {
    margin: .5em;
    border-radius: .4em;
    box-shadow: var(--shadow-color, #999) 1px 1px;
    max-height: 60vh;
    overflow-y: auto;
  }
}
.readme dt {font-weight: bold;}
.readme dl, .readme ul {
    margin-left: 2em;
    padding-left: 0;
}
.readme li {
    list-style-position: inside;
}
.readme dd::before {
    content: '‣  ';
    color: var(--secondary-color);
}
.readme dd {
    margin-left: 0;
}

.list > button + button {
    margin-left: 1em;
}

.list td.txt pre,
.list td.photo img,
.list td.video video,
.list td.audio audio {
    max-width:  100%;
    max-height: 98vh;
}
/* default flow is better for these!
.list td.txt pre,
.list td.video video,
*/
.list td.audio audio {
    width: 100%;
}
.list td.txt pre,
.list td.photo,
.list td.video,
.list td.audio {
    text-align: left;
    padding: 2px 2px 2px 22px;
}
.list td.txt pre {
    overflow: auto;
}

.breadcrumbs {
    font-size: smaller;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: 4px;
}
.breadcrumbs a {
    text-align: center;
}
.breadcrumbs a + a::before {
    content: '‣';
    display: inline-block;
    width: 1em;
    text-align: center;
    color: var(--secondary-color);
}
.breadcrumbs .home {
    min-height:24px;
    min-width:24px;
}
.breadcrumbs .home img {
    height: 20px;
    padding:2px;
}
@media (max-width: 425px) {
  .breadcrumbs {
    flex-direction: column;
    align-items: flex-start;
  }
  .breadcrumbs a {
      text-align: left;
  }
  .breadcrumbs a + a {margin-left:8px}
  .breadcrumbs a + a + a {margin-left:16px}
  .breadcrumbs a + a + a + a {margin-left:24px}
  .breadcrumbs a + a + a + a + a {margin-left:32px}
  .breadcrumbs a + a + a + a + a + a {margin-left:40px}
  .breadcrumbs a + a + a + a + a + a + a {margin-left:48px}
  .breadcrumbs a + a + a + a + a + a + a + a {margin-left:56px}
  .breadcrumbs a + a + a + a + a + a + a + a + a {margin-left:64px}
  .breadcrumbs a + a + a + a + a + a + a + a + a + a {margin-left:70px}
  .breadcrumbs a + a + a + a + a + a + a + a + a + a ~ a {margin-left:78px}
}

.buttons {
    display: flex;
    justify-content: flex-start;
}
.buttons > button + button {
    margin-left: 1em;
}
.buttons > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buttons > button > img {
    margin-right: 4px;
}
body > h2 > strong {
    padding-left: 24px;
    display: inline-block;
    min-height: 16px;
    background: url(/favicon.ico) 0 0 no-repeat;
    background-size: contain;
}

.inline {
    position: relative;
}
.inline > button {
    position:absolute;
    left:0;
    padding:2px;
    line-height:1;
}
.inline > button > img {
    width: 12px;
    height: 12px;
}
.close {top:0}
.rotate-left {top:2rem}
.rotate-right {top:4rem}

.inline > .content {
    text-align: left;
    vertical-align: top;
    white-space: normal;
    margin: .2em .5em 1em 2em;
}

.no-js .w-js, .js .wo-js {display: none}

nav {
 position:absolute;
 top:.5em;
 right:.5em;
 text-align:right;
 display: flex;
}
nav > * + * {margin-left: .68em}
@media (max-width: 425px) {
  nav {flex-direction: column}
  nav > * + * {margin-top: 1em}
}

.color-scheme-selector a {
    color: var(--primary-color);
    background-color: var(--background-color);
    border: 1px solid var(--secondary-color);
    box-shadow: var(--secondary-color) 0px 0px 8px 2px;
    display: inline-block;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin: 0 .3em;
}
.color-scheme-selector a:hover {text-decoration: none}

pre {
    font-family: monospace;
    line-height: 1;
    white-space: pre-wrap;
}

.mediainfo pre {
  margin: 0;
}
.mediainfo section {
  padding: .8em;
  border-top: 1px solid #ccc;
  position: relative;
  margin-top: .5em;
}
.mediainfo section[id]::before {
  content: attr(id);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: .1em .5em;
  margin: -1em 0 0 0;
  background-color: var(--background-color);
  color: var(--secondary-color);
  font-family: monospace;
}

.mediainfo table {
  table-layout: auto;
  width: 100%;
  border-spacing: 1ch 1px;
}

.mediainfo table > tbody > tr > th:first-child {
  vertical-align: top;
}

.mediainfo table > tbody > tr > th:first-child:not([colspan]) {
  padding-left: 1em;
  width: 20%;
  white-space: nowrap;
}

.mediainfo td {
  word-break: break-all;
}

var {font-style:normal}

.emoji,
[data-emoji]::before,
[data-emoji-before]::before,
[data-emoji-after]::after
{font-family:"Noto Color Emoji","Emoji One",emoji,Symbola}
[data-emoji]::before {content:attr(data-emoji)}
[data-emoji-before]::before {content:attr(data-emoji-before)}
[data-emoji-after]::after {content:attr(data-emoji-after)}

/* search pages */
#find, #help, #status {
  margin: 1em .1em;
  padding: .5em 1em;
  line-height: 1.3;
  background-color: var(--background-highlights, #ffc);
  color: var(--highlights-color, #000);
}
#status {white-space: pre-wrap}
#find {display:flex}
@media screen and (max-width: 699px) {#find{flex-wrap:wrap}}
#find input, #find select, #find button {margin:0 .4em}
#q,#query{flex-grow:999}
ol {
  padding-left: 0.5em;
}
ol > li {
  margin-left: 2.5em;
}
ol > p {
  margin-bottom: 0.2em;
}
.msg {
  padding: 1em;
  margin: 1em;
  color: var(--msg-color, var(--highlights-color));
  background-color: var(--msg-background-color, var(--background-highlights));
  border-radius: .4em;
  box-shadow: var(--shadow-color, #999) 1px 1px;
}
.msg > *:first-child {margin-top:0}
.msg > *:last-child {margin-bottom:0}
.warn {
  background-color: #E57373;
  color: #020202;
}
.err {
  background-color: var(--error-background,#c00);
  color: var(--error-color,#fff);
}

/* smartphones, touchscreens */
@media (pointer: coarse) {
    button, input, select {
        min-width: 48px;
        min-height: 48px;
        box-sizing: border-box;
    }
    .breadcrumbs > * {
        min-width: 48px;
    }
    .breadcrumbs a + a::before {line-height:48px}
    .breadcrumbs .home img {
        height: 32px;
        width: 32px;
    }
    .list thead a {
        display: inline-block;
        min-height: 48px;
    }
    .list thead a::before {
        line-height:48px;
        display:inline-block;
        content:"\200B";
    }
    .list td.n a:first-child::before {
        min-height: 48px;
    }
    .list .inline > .content {
        margin-left: 52px;
    }
    .list .inline > button > img {
        width: auto;
        height: auto;
        max-width: 44px;
        max-height: 44px;
    }
    .list .rotate-left {
        top:calc(48px + 4px);
    }
    .list .rotate-right {
        top:calc(48px * 2 + 4px * 2);
    }
    .list td.audio {
        padding-left: 50px;
    }

}

.action-buttons {
  display: inline-block;
  text-align: right;
  margin-left: 2em;
}
@media (max-width: 600px) {
  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (hover: hover) {
  .action-buttons {visibility:hidden}
  h2:hover .action-buttons,
  h2:focus-within .action-buttons,
  tr:hover .action-buttons,
  tr:focus-within .action-buttons
  ,.result:focus-within > .action-buttons
  ,.result:hover > .action-buttons
  {
    visibility:visible;
  }
}

.action-button {
  transition: color .2s ease;
  transition: background-color .2s ease;
  display:inline-block;
  text-align: center;
  vertical-align:middle;
  margin: 1px 2px;
  padding: 2px 4px;
  border-width: 0px;
  text-decoration: none;
  box-sizing: border-box;
/*
  max-height: 1em;
*/
}
.action-button + .action-button {
  margin-left: .6em;
}
@media (pointer: coarse) {
    .action-button {
        min-width: 48px;
        min-height: 48px;
        line-height: 48px;
    }
/*
    .list > table > tbody > tr > td.n {
      position: relative;
      padding-bottom: 48px;
      white-space: normal;
      word-break:  break-all;
    }
    .n > .action-buttons {
      position: absolute;
      bottom: 0;
      right: 0;
    }
*/
}
.action-button:hover {
  text-decoration: none;
}
.action-button > * {
    max-height: fit-content;
}

.copy-button::after {
  float:right;
}
.copy-button.copy-succeeded::after {content:'Copied!'}
.copy-button.copy-failed::after    {content:'Failed!'}
.copy-button.copy-succeeded {
  color: var(--accent-color, #4caf50);
}
.copy-button.copy-failed {
  color: var(--error-color, #d7ccc8);
  background-color: var(--error-background, #ec407a);
}

.list .inline > object {
  box-sizing:border-box;
  margin-left: 48px;
  width:  calc( 100% - 48px );
  height: 60vh;
  max-width:  calc( 100vw - 48px );
  max-height: 98vh;
  object-position: top left;
  object-fit: contain;
  text-align: left;
}

[data-emoji] {
  position: relative;
  padding-left: 2.2rem;
}
a[data-emoji] {
  display: inline-block;
}
[data-emoji]::before {
  content: attr(data-emoji);
  font-family: "Noto Color Emoji","Emoji One",emoji,Symbola;
  display: inline-block;
  position: absolute;
/* don't! let it go along first line
  top: 0.2rem;
  line-height: 1;
 */
  left: 0.2rem;
  font-size: 1.2rem;
}
.hidden {display:none}

blockquote {
  margin: 0;
  padding: .5em 0 .5em 1em;
  border-left: 4px solid var(--accent-color);
  background-color: var(--accent-background);
}
blockquote > :first-child {
  margin-block-start: 0;
}
blockquote > :last-child {
  margin-block-end: 0;
}

tbody th {
  text-align: left;
  font-weight: normal;
}

#poster {
  border-radius: .4em;
  padding: .2em .5em;
  display: inline-block;
  float: right;
  margin: 0 0 1em 1em;
  text-align: right;
}
#poster img {
  max-width: 40vw;
  max-height: 40vh;
}

.no-dummy .for-dummies {display: none}

kbd {
  box-shadow: 1px 1px 2px rgba(100,100,100,0.5);
  border: 1px solid rgba(100,100,100,0.5);
  border-top-color: rgba(100,100,100,0.1);
  border-left-color: rgba(100,100,100,0.1);
  border-radius: 2px;
  margin: 0 .2em;
  padding: 0 .5em;
  background-color: rgba(100,100,100,0.3);
}

.list tfoot#list-totals td.n a {
  float:left;
  margin-right:1em;
  background-color: var(--secondary-background);
  padding: 1px 4px;
}