/* Stylesheet used by the ifarchive.org admin tool. Lives at:
   https://ifarchive.org/misc/admintool.css

   Note that this file is maintained in two repositories, which is a minor
   nuisance. Happily we don't update this often. If you do, keep them in
   sync.

   https://github.com/iftechfoundation/ifarchive-static
   https://github.com/iftechfoundation/ifarchive-admintool

   (This does not require the same cache-busting as ifarchive.css, because
   upload.ifarchive.org is not behind Cloudflare.)
*/

body {
    background-color: #FAF5E9;
    color: black;
    font-family: "Verdana", sans-serif;
    margin: 0px;
}

#header {
    margin: 0px;
    width: 100%;
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #DAB886;
    margin-bottom: 20px;
}

#headercol {
    margin-left: 40px;
    margin-right: 40px;
}

#header h1 {
    margin: 0px;
    font-weight: normal;
    font: 180% Georgia, "Times New Roman", serif;
}

#header #userline {
    float: right;
    text-align: right;
    font-size: 90%;
}

#body {
    position: relative;
    margin: 0px 0px;
    width: 100%;
}

#bodycol {
    margin-left: 40px;
    margin-right: 40px;
}

#navbar {
    background-color: #641;
    font-size: 85%;
    padding: 4px 8px;
    margin-bottom: 20px;
}

#navbar a {
    color: white;
    text-decoration: none;
    padding: 2px 8px;
}

#navbar a:hover {
    text-decoration: underline;
}

#navbar .Selected {
    background-color: #A71;
    border-radius: 4px;
    box-shadow: inset 0px 0px 4px #DD0;
}

#body h1 {
    font-weight: normal;
    font: 120% Georgia, "Times New Roman", serif;
}

.FormInput {
    font-size: 100%;
    margin: 4px;
    min-width: 50%;
    padding: 2px 4px;
}

.FormTextArea {
    font-family: "Menlo", "Consolas", monospace;
    font-size: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 8px;
    width: 95%;
}

.FormTextHalfLine {
    font-family: "Menlo", "Consolas", monospace;
    font-size: 85%;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 4px;
    width: 50%;
}

.FormButton {
    font-size: 100%;
    font-weight: normal;
    margin: 4px;
    background-color: white;
    color: black;
    border: 1px solid #AAA;
    border-radius: 6px;
    padding: 2px 8px;
}

.HotButton {
    background-color: #EFA;
}

.SmallButton {
    font-size: 85%;
}

.FormAction {
    font-style: italic;
    margin: 4px 8px;
}

.FormWarning {
    font-size: 85%;
    font-style: italic;
}

.FormButtonLabel {
    font-size: 85%;
    margin-left: 20px;
}

.FormSubaction {
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 4px;
}

a {
    color: #B50000;
}

#header a {
    color: #850000;
}

a:hover {
    color: #D11515;
}

hr {
    border: none;
    height: 2px;
    background: #F0D0A0;
}

code {
    font: 100% "Courier Prime", "Courier", monospace;
    background: #ECE0B0;
    padding: 1px 2px;
}

pre {
    background: #ECE0B0;
    padding: 8px 16px;
}

.Tabular {
    font-family: "Menlo", "Consolas", monospace;
}

.ToolTip {
    text-decoration: underline;
    text-decoration-style: dashed;
}

.Emph {
    font-style: italic;
}

.RightAlign {
    text-align: right;
}

ul {
    list-style: none;
    padding-left: 0px;
    margin-left: 10px;
    border-left: 3px solid #F0D0A0;
}

ul li {
    background-image: url("cssbullet.png");
    background-origin: border-box;
    background-repeat: no-repeat;
    background-position-y: 0.5cap;
    background-position-x: -2px;
    padding-left: 12px;
    text-indent: 20px hanging;
}

ul.InfoList li {
    margin-top: 4px;
    margin-bottom: 4px;
}

ul.UserInfoList li {
    margin-top: 4px;
    margin-bottom: 4px;
}

.DirButtons {
    margin-left: 0px;
    padding-left: 40px;
}

.FileList dt {
    margin-top: 6px;
}

.FileList dd.FileInfoList {
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.FileList dd.FileInfoLine {
    margin-left: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 85%;
    padding-left: 30px;
}

.FileList dd.FileButtons {
    margin-left: 0px;
    padding-left: 30px;
}

.FileList .Details {
    font-size: 85%;
}

.FileList .Selected {
    background: #FFA;
    padding-top: 8px;
    padding-bottom: 8px;
}

.FileList .Selected .HotButton {
    background-color: #EAFB80;
}

.SubdirButtons.Selected {
    background: #FFA;
    padding-top: 8px;
    padding-bottom: 8px;
}

.FileComments {
    margin-top: 10px;
    margin-bottom: 10px;
    text-indent: 0px;
    font-size: 85%;
    white-space: pre-wrap;
    border-left: 3px solid #F0D0A0;
    padding-left: 16px;
}

.ItemName {
    font-size: 85%;
}

.ItemGloss {
    font-size: 85%;
    font-style: italic;
}

.MetadataLine {
    font-size: 85%;
    font-family: "Menlo", "Consolas", monospace;
}

.ResultNote {
    background: #FFA;
    padding: 4px 8px;
}

@media screen and (max-width: 480px) {
    #header h1 {
        font-size: 120%;
    }
    
    #headercol {
        margin-left: 20px;
        margin-right: 20px;
    }

    #bodycol {
        margin-left: 20px;
        margin-right: 20px;
    }
    
}

/* Our handling of dark-vs-light theme requires a bunch of regrettably
   redundant declarations. All colors (declared above for light mode)
   will be repeated below under the LightMode class, then their
   dark equivalents under DarkMode. Then we repeat both *again*
   with a color-scheme rule, under SysMode.

   The magic --- comments assist automated updates of these repeated
   declarations.

   See darkmode.js for an explanation of the CSS class handling. */

/* --- begin LightMode --- */

body.LightMode {
    background-color: #FAF5E9;
    color: black;
}

.LightMode #header {
    background-color: #DAB886;
}

.LightMode #navbar {
    background-color: #641;
}

.LightMode #navbar a {
    color: white;
}

.LightMode #navbar .Selected {
    background-color: #A71;
    box-shadow: inset 0px 0px 4px #DD0;
}

.LightMode .FormInput {
    color: black;
    background-color: white;
}

.LightMode .FormTextArea {
    color: black;
    background-color: white;
}

.LightMode .FormButton {
    background-color: white;
    color: black;
    border: 1px solid #AAA;
}

.LightMode .HotButton {
    background-color: #EFA;
}

.LightMode a {
    color: #B50000;
}

.LightMode #header a {
    color: #850000;
}

.LightMode a:hover {
    color: #D11515;
}

.LightMode hr {
    background: #F0D0A0;
}

.LightMode code {
    background: #ECE0B0;
}

.LightMode pre {
    background: #ECE0B0;
}

.LightMode ul {
    border-left: 3px solid #F0D0A0;
}

.LightMode ul li {
    background-image: url("cssbullet.png");
}

.LightMode .FileList .Selected {
    background: #FFA;
}

.LightMode .FileList .Selected .HotButton {
    background-color: #EAFB80;
}

.LightMode .SubdirButtons.Selected {
    background: #FFA;
}

.LightMode .FileComments {
    border-left: 3px solid #F0D0A0;
}

.LightMode .ResultNote {
    background: #FFA;
}

/* --- end LightMode --- */

/* --- begin DarkMode --- */

body.DarkMode {
    background-color: #262205;
    color: white;
}

.DarkMode #header {
    background-color: #641;
}

.DarkMode #navbar {
    background-color: #CAA876;
}

.DarkMode #navbar a {
    color: black;
}

.DarkMode #navbar .Selected {
    background-color: #BC8900;
    box-shadow: inset 0px 0px 4px #650;
}

.DarkMode .FormInput {
    color: white;
    background-color: black;
}

.DarkMode .FormTextArea {
    color: white;
    background-color: black;
}

.DarkMode .FormButton {
    background-color: black;
    color: white;
    border: 1px solid #909090;
}

.DarkMode .HotButton {
    background-color: #456000;
}

.DarkMode a {
    color: #FF6840;
}

.DarkMode #header a {
    color: #FF8848;
}

.DarkMode a:hover {
    color: #FF4820;
}

.DarkMode hr {
    background: #765215;
}

.DarkMode code {
    background: #6C4000;
}

.DarkMode pre {
    background: #6C4000;
}

.DarkMode ul {
    border-left: 3px solid #765215;
}

.DarkMode ul li {
    background-image: url("cssbulletdark.png");
}

.DarkMode .FileList .Selected {
    background: #550;
}

.DarkMode .FileList .Selected .HotButton {
    background-color: #607800;
}

.DarkMode .SubdirButtons.Selected {
    background: #550;
}

.DarkMode .FileComments {
    border-left: 3px solid #765215;
}

.DarkMode .ResultNote {
    background: #550;
}

/* --- end DarkMode --- */

@media (prefers-color-scheme: light) {

/* --- begin mediaLightMode --- */

body.SysMode {
    background-color: #FAF5E9;
    color: black;
}

.SysMode #header {
    background-color: #DAB886;
}

.SysMode #navbar {
    background-color: #641;
}

.SysMode #navbar a {
    color: white;
}

.SysMode #navbar .Selected {
    background-color: #A71;
    box-shadow: inset 0px 0px 4px #DD0;
}

.SysMode .FormInput {
    color: black;
    background-color: white;
}

.SysMode .FormTextArea {
    color: black;
    background-color: white;
}

.SysMode .FormButton {
    background-color: white;
    color: black;
    border: 1px solid #AAA;
}

.SysMode .HotButton {
    background-color: #EFA;
}

.SysMode a {
    color: #B50000;
}

.SysMode #header a {
    color: #850000;
}

.SysMode a:hover {
    color: #D11515;
}

.SysMode hr {
    background: #F0D0A0;
}

.SysMode code {
    background: #ECE0B0;
}

.SysMode pre {
    background: #ECE0B0;
}

.SysMode ul {
    border-left: 3px solid #F0D0A0;
}

.SysMode ul li {
    background-image: url("cssbullet.png");
}

.SysMode .FileList .Selected {
    background: #FFA;
}

.SysMode .FileList .Selected .HotButton {
    background-color: #EAFB80;
}

.SysMode .SubdirButtons.Selected {
    background: #FFA;
}

.SysMode .FileComments {
    border-left: 3px solid #F0D0A0;
}

.SysMode .ResultNote {
    background: #FFA;
}

/* --- end mediaLightMode --- */

}

@media (prefers-color-scheme: dark) {

/* --- begin mediaDarkMode --- */

body.SysMode {
    background-color: #262205;
    color: white;
}

.SysMode #header {
    background-color: #641;
}

.SysMode #navbar {
    background-color: #CAA876;
}

.SysMode #navbar a {
    color: black;
}

.SysMode #navbar .Selected {
    background-color: #BC8900;
    box-shadow: inset 0px 0px 4px #650;
}

.SysMode .FormInput {
    color: white;
    background-color: black;
}

.SysMode .FormTextArea {
    color: white;
    background-color: black;
}

.SysMode .FormButton {
    background-color: black;
    color: white;
    border: 1px solid #909090;
}

.SysMode .HotButton {
    background-color: #456000;
}

.SysMode a {
    color: #FF6840;
}

.SysMode #header a {
    color: #FF8848;
}

.SysMode a:hover {
    color: #FF4820;
}

.SysMode hr {
    background: #765215;
}

.SysMode code {
    background: #6C4000;
}

.SysMode pre {
    background: #6C4000;
}

.SysMode ul {
    border-left: 3px solid #765215;
}

.SysMode ul li {
    background-image: url("cssbulletdark.png");
}

.SysMode .FileList .Selected {
    background: #550;
}

.SysMode .FileList .Selected .HotButton {
    background-color: #607800;
}

.SysMode .SubdirButtons.Selected {
    background: #550;
}

.SysMode .FileComments {
    border-left: 3px solid #765215;
}

.SysMode .ResultNote {
    background: #550;
}

/* --- end mediaDarkMode --- */

}