/*
 * Apache automatic directory listing
 *
 * Directories first
 * Full filenames
 * Different colors by file extension
 */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 30px;
    background: white;
    color: #222;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}


/* -----------------------------------------
   TABLE
   ----------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 2px solid #888;
}

td {
    padding: 7px 10px;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background: #fafafa;
}

tr:hover {
    background: #f1f1f1;
}


/* -----------------------------------------
   FULL FILENAMES
   ----------------------------------------- */

td.indexcolname {
    width: auto;
}

td.indexcolname a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    text-decoration: none;
    font-weight: 500;
}

td.indexcolname a:hover {
    text-decoration: underline;
}


/* -----------------------------------------
   DEFAULT FILE COLOR
   ----------------------------------------- */

td.indexcolname a {
    color: #222;
}


/* -----------------------------------------
   DIRECTORIES
   Apache directory links normally end in /
   ----------------------------------------- */

td.indexcolname a[href$="/"] {
    color: #0057b8;
    font-weight: bold;
}


/* -----------------------------------------
   IMAGES — GREEN
   ----------------------------------------- */

a[href$=".jpg" i],
a[href$=".jpeg" i],
a[href$=".png" i],
a[href$=".gif" i],
a[href$=".webp" i],
a[href$=".svg" i],
a[href$=".bmp" i],
a[href$=".tif" i],
a[href$=".tiff" i],
a[href$=".heic" i] {
    color: #087c2c !important;
}


/* -----------------------------------------
   VIDEO — DARK RED
   ----------------------------------------- */

a[href$=".mp4" i],
a[href$=".mov" i],
a[href$=".m4v" i],
a[href$=".avi" i],
a[href$=".mkv" i],
a[href$=".webm" i],
a[href$=".mpeg" i],
a[href$=".mpg" i] {
    color: #b00020 !important;
}


/* -----------------------------------------
   AUDIO — ORANGE
   ----------------------------------------- */

a[href$=".mp3" i],
a[href$=".wav" i],
a[href$=".m4a" i],
a[href$=".aac" i],
a[href$=".ogg" i],
a[href$=".flac" i] {
    color: #cc6200 !important;
}


/* -----------------------------------------
   PDF — RED
   ----------------------------------------- */

a[href$=".pdf" i] {
    color: #e00000 !important;
    font-weight: bold;
}


/* -----------------------------------------
   HTML — PURPLE
   ----------------------------------------- */

a[href$=".html" i],
a[href$=".htm" i] {
    color: #7020a0 !important;
}


/* -----------------------------------------
   TEXT — GRAY
   ----------------------------------------- */

a[href$=".txt" i],
a[href$=".md" i],
a[href$=".rtf" i],
a[href$=".log" i],
a[href$=".csv" i] {
    color: #555 !important;
}


/* -----------------------------------------
   PROGRAM / SOURCE FILES — TEAL
   ----------------------------------------- */

a[href$=".py" i],
a[href$=".sh" i],
a[href$=".bash" i],
a[href$=".c" i],
a[href$=".cc" i],
a[href$=".cpp" i],
a[href$=".h" i],
a[href$=".hpp" i],
a[href$=".js" i],
a[href$=".css" i],
a[href$=".json" i],
a[href$=".xml" i],
a[href$=".scad" i] {
    color: #007070 !important;
}


/* -----------------------------------------
   ARCHIVES — BROWN/GOLD
   ----------------------------------------- */

a[href$=".zip" i],
a[href$=".tar" i],
a[href$=".gz" i],
a[href$=".tgz" i],
a[href$=".bz2" i],
a[href$=".xz" i],
a[href$=".7z" i] {
    color: #946200 !important;
}


/* -----------------------------------------
   OFFICE DOCUMENTS — DARK BLUE
   ----------------------------------------- */

a[href$=".doc" i],
a[href$=".docx" i],
a[href$=".xls" i],
a[href$=".xlsx" i],
a[href$=".ppt" i],
a[href$=".pptx" i],
a[href$=".odt" i],
a[href$=".ods" i] {
    color: #204a87 !important;
}


/* -----------------------------------------
   DATE AND SIZE
   ----------------------------------------- */

td.indexcollastmod {
    color: #666;
    white-space: nowrap;
}

td.indexcolsize {
    color: #555;
    white-space: nowrap;
}


/* Description column */

td.indexcoldesc {
    color: #777;
}