/* Stylesheet used by ifarchive.org. Lives at:
   https://ifarchive.org/misc/ifarchive.css
   
   Nearly all the pages on the IF Archive rely on this stylesheet. That
   includes the upload form and the Unbox service. See repos:

   https://github.com/iftechfoundation/ifarchive-unbox
   https://github.com/iftechfoundation/ifarchive-upload-py

   If you update this file on the server, you'll want to cache-bust the
   URL it uses (really multiple URLs) so that Archive index pages pick
   up the change. To do this:

   sudo /var/ifarchive/bin/uncache.py -u https://ifarchive.org/misc/ifarchive.css
   sudo /var/ifarchive/bin/uncache.py -u http://ifarchive.org/misc/ifarchive.css
   sudo /var/ifarchive/bin/uncache.py -u https://www.ifarchive.org/misc/ifarchive.css
   sudo /var/ifarchive/bin/uncache.py -u http://www.ifarchive.org/misc/ifarchive.css

*/

/* general styles */

html, body
{
	height: 100%;
}

body
{
	margin: 0px;
	background-color: #333;
	font: 62.5% Verdana, sans-serif;
}

.Page
{
	margin: 0px 30px;
	padding: 0.1em 6em 4em 6em;
	background-color: #faf5e9;
	color: #060500;
	_height: 100%;
	border-left: 2px solid #fff;
	border-right: 1px solid #78714b;
}

a
{
	color: #b50000;
}

a:visited
{	
	color: #803030;
}

a:hover
{
	color: #d11515;
}

blockquote
{
	background-color: #f5f0e6;
	color: #000;
	font: 120% Georgia, "Times New Roman", serif;
	padding: 0px 10px;
	margin: 0px;
	border: 1px dotted #aaa;
}

p, li, dd
{
	font-size: 1.4em;
	line-height: 140%;
}

h1, h2, h3, h3
{
	color: #382806;
}

h1
{
	font-weight: normal;
	font-size: 3.8em;
	font-family: Georgia, "Times New Roman", serif;
	margin-bottom: 0.4em;
	text-align: center;
}

h3
{
	margin: 2em 0px 0px 0px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.4em;
	font-weight: normal;
}

h4
{
	margin: 2em 0px 0px 0px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.2em;
	font-weight: normal;
}

hr
{
	display: none;
}

.RightAlign
{
	text-align: right;
}

.LeftFloat, .LeftFloatIfWide
{
	float: left;
	margin-right: 2em;
}

.RightFloat
{
	float: right;
	margin-left: 2em;
}

.ClearFloat
{
	clear: both;
}

.BottomMargin
{
	margin-bottom: 1.5em;
}

.NoBottomMargin
{
	margin-bottom: 0px;
}

.NoTopMargin
{
	margin-top: 0px;
}

.Hide
{
	display: none;
}

.Footer
{
	clear: both;
	padding-top: 4em;
	margin: 0px 5%;
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
}

.FootWidget
{
	border: 1px dotted #000;
	background-color: #faf5e9;
	color: #060500;
	border-radius: 10px;
	padding: 2px 6px;
	font-weight: bold;
	font-size: 1.0em;
	cursor: pointer;
}

.FootWidget:hover
{
	background-color: #262205;
	color: #fffdf0;
}


.Footer a
{
	color: #5a0000;
	text-decoration: none;
	font-weight: bold;
	font-style: normal;
}

.Footer a:hover
{
	color: #d11515;
	text-decoration: underline;
}

.Header
{
	padding-top: 1em;
}

.Date
{
	font-size: 90%;
	font-weight: normal;
	color: #777;
}

.SymLinkRef
{
	font-size: 80%;
	font-weight: normal;
}

a.PermaLink
{
	text-decoration: none;
	color: #DAA;
}
a.PermaLink:hover
{
	color: #D11515;
}

.ItemList dd.FileData
{
	font-size: 1.0em;
	margin-left: 20px;
}

.ItemList dd.FileData a
{
	font-weight: normal;
}

/* elements that appear on several pages */

#indexlist
{
	margin-left: 0px;
	padding-left: 0px;
	text-indent: 10px hanging;
}

#alldirlist a,
{
	font-weight: bold;
}

#alldirlist li,
{
	font-size: 1.4em;
	margin-bottom: 0.4em;
}


#subdirlist
{
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
}

#subdirlist li
{
	font-weight: bold;
	font-size: 1.4em;
	margin-bottom: 0.4em;
}

.ItemList
{
	margin: 0px;
}

.ItemList dt
{
	font-weight: bold;
	font-size: 1.4em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	text-indent: 20px hanging;
}

.ItemList dd {
	margin-left: 20px;
}

.ItemList dd p
{
	margin-top: 0.4em;
	margin-left: 0px;
	padding-left: 0px;
	margin-bottom: 0.4em;
	font-size: 0.9em;
}

.ItemList dd ul
{
	padding-left: 20px;
}

.ItemList dd li
{
	list-style: circle;
	font-size: 0.9em;
}

/* home page */

#frontpage
{
	position: relative;
}

#frontpage .Header
{
	margin-bottom: 4em;
}

#frontpage .Description blockquote
{
	margin: 0px;
}

#frontpage .PrimeLink a
{
	font-size: 120%;
	font-weight: bold;
}

#frontpage .Description, #frontpage .ArchiveMirrors, #frontpage .Submissions, #frontpage .Introduction
{
	margin-right: 330px;
	word-wrap: break-word;
}

#frontpage .RightCol
{
	position: absolute;
	width: 270px;
}

#frontpage .RightCol h3
{
	font-size: 1.8em;
	font-style: italic;
	margin: 0px;
	padding-bottom: 0.1em;
	border-bottom: 1px dotted #222;
}

#frontpage .RightCol p,
#frontpage .RightCol li
{
	font-size: 1.2em;
}

#frontpage .RightCol
{
	top: 11.5em;
	right: 6em;
}

#frontpage .RightCol ul
{
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
}

#frontpage .RightCol li
{
	margin-bottom: 1.2em;
}

#frontpage .NewToIF
{
	margin-top: 1em;
}

#frontpage .Submissions
{
	margin-top: 3em;
}

#frontpage .ColImage
{
	max-width: 100%;
	aspect-ratio: auto 2/3;
}

#frontpage .IFTFLogo
{
	margin-top: 8px;
	margin-bottom: 8px;
}

#frontpage img
{
	filter: none;
}

#frontpage .LogoButtonBlock
{
	text-align: center;
}

#frontpage .Donate
{
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.4em;
	font-weight: bold;
	margin: 4px;
	color: white;
	background-color: #D16525;
	border: 1px solid #5A0000;
	border-radius: 6px;
	padding: 8px 10px;
	cursor: pointer;
}

#frontpage .Donate:hover
{
	background-color: #F17545;
}

/* orthogonal list pages */

#dirpage .Header,
#datepage .Header
{
	margin-bottom: 3em;
}

#dirpage .Description,
#datepage .Description
{
	width: 20% !important; /* overrides later declaration in #indexpage section */
}

#dirpage .Body,
#datepage .Body
{
	padding-top: 1px;
	margin-left: 20% !important; /* overrides later declaration in #indexpage section */
}

/* full index pages */

#indexpage h1
{
	margin-bottom: 0px;
}

#indexpage .ParentLinks
{
	text-align: center;
}

#indexpage .ParentLinks a
{
	color: #5a0000;
	text-decoration: none;
	font-weight: bold;
}

#indexpage .ParentLinks a:hover
{
	color: #d11515;
	text-decoration: underline;
}

#indexpage .ParentLinks ul
{
	margin: 0.3em;
	margin-left: 0px;
	padding-left: 0px;
}

#indexpage .ParentLinks li
{
	display: inline;
	font-size: 1.3em;
	margin-left: 0px;
	padding-left: 0px;
	margin-right: 1.5em;
}

#indexpage .Description, #indexpage .Body
{
	margin-top: 3em;
}

#indexpage .Description, 
#dirpage .Description,
#datepage .Description
{
	float: left;
	width: 35%;
	font-size: 1.2em;
	line-height: 140%;
}

#indexpage .Description p,
#indexpage .Description li,
#dirpage .Description p,
#dirpage .Description li,
#datepage .Description p,
#datepage .Description li
{
	font-size: 100%;
}

#indexpage .Description a:hover
{
	text-decoration: underline;
}

#indexpage .Description ul
{
	padding-left: 2.1em;
	margin-left: 0px;
}

#indexpage .Description li
{
	margin-bottom: 0.3em;
}

#indexpage .Description .PropList
{
	list-style: none;
	padding-left: 0px;
}

#indexpage .Description .PropList li
{
	margin-left: 0px;
}

#dirpage .Body dl,
#datepage .Body dl
{
	margin-left: 20px;
}

#indexpage .Body, 
#dirpage .Body,
#datepage .Body
{
	margin-left: 38%;
	word-wrap: break-word;
}

#indexpage .Body a
{
	font-weight: bold;
}

#indexpage h3.ListHeader
{
	margin-top: 1em;
	padding-bottom: 0.1em;
	margin-bottom: 1em;
	font-size: 1.8em;
	font-style: italic;
	border-bottom: 1px dotted #222;
}

#indexpage h4.ListHeader
{
	margin-top: 1em;
	padding-bottom: 0.1em;
	margin-bottom: 1em;
	font-size: 1.6em;
	font-style: italic;
	text-decoration: underline #222 dotted;
}

#indexpage .Header a
{
	color: #382806;
	text-decoration: none;
}

#indexpage .Header a:hover
{
	color: #d11515;
	text-decoration: underline;
}

/* other pages */

#licensepage blockquote
{
	font-family: inherit;
	border: none;
	background-color: inherit;
	margin-left: 40px;
	padding: 0px;
}

#licensepage ul
{
	font-size: 0.85em;
	list-style: none;
}

#uploadpage .QuoteBox
{
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

#uploadpage code
{
	font: 100% "Courier Prime", "Courier", monospace;
}

#uploadpage .FormTable
{
	font-size: 1.5em;
}

#uploadpage .FormTable .FormField
{
	width: 100%;
	font-size: 1.0em;
	padding: 2px 4px;
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

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

#uploadpage .SubmitPara
{
	text-align: center;
}

#uploadpage .FormUploadWidget
{
	font-size: 100%;
}

#unboxpage .Header a
{
	color: #382806;
	text-decoration: none;
}

#unboxpage .Description
{
	text-align: center;
}

#unboxpage .StartForm
{
	margin: 25px 0;
}

#unboxpage .InputLine
{
	font-size: 175%;
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

#unboxpage .Button
{
	font-size: 175%;
	border-radius: 6px;
	border: 1px solid black;
	background: white;
	color: black;
}

#unboxpage .StartButton
{
	padding: 4px 8px;
}

#unboxpage .ListBox
{
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}

#unboxpage .Error
{
	font-family: monospace;
}

/* Style customizations for narrow displays. */

@media screen and (max-width: 960px) {

.LeftFloatIfWide
{
	float: none;
	margin-right: 0px;
}

}

@media screen and (max-width: 750px) {

.Page 
{
	padding: 0.1em 3em 2em 3em;
}

#frontpage .Description, #frontpage .ArchiveMirrors, #frontpage .Submissions, #frontpage .Introduction
{
	margin-right: 60%;
}

#frontpage .RightCol
{
	position: absolute;
	width: 40%;
}

}

@media screen and (max-width: 480px) {

.Page 
{
	margin: 0px 0px;
}

#indexpage .Description, 
#dirpage .Description,
#datepage .Description
{
	float: none;
	width: 100% !important;
}

#indexpage .Body, 
#dirpage .Body,
#datepage .Body
{
	margin-left: 0px !important;
}

#frontpage .RightCol
{
	position: relative;
	padding-top: 0px;
	width: inherit;
	top: 0px;
	right: 0px;
	margin-top: 3em;
	background-image: none;
}

#frontpage .Description, #frontpage .ArchiveMirrors, #frontpage .Submissions, #frontpage .Introduction
{
	margin-right: 0px;
}

}

/* End @media rules for narrow pages. */

/* 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: #333;
}

.LightMode .Page
{
	background-color: #faf5e9;
	color: #060500;
	border-left: 2px solid #fff;
	border-right: 1px solid #78714b;
}

.LightMode a
{
	color: #b50000;
}

.LightMode a:visited
{	
	color: #803030;
}

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

.LightMode blockquote
{
	background-color: #f5f0e6;
	color: #000;
	border: 1px dotted #aaa;
}

.LightMode h1, .LightMode h2, .LightMode h3, .LightMode h4
{
	color: #382806;
}

.LightMode .FootWidget
{
	border: 1px dotted #000;
	background-color: #faf5e9;
	color: #060500;
}

.LightMode .FootWidget:hover
{
	background-color: #262205;
	color: #fffdf0;
}

.LightMode .Footer a
{
	color: #5a0000;
}

.LightMode .Footer a:hover
{
	color: #d11515;
}

.LightMode .Date
{
	color: #777;
}

.LightMode a.PermaLink
{
	color: #DAA;
}

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

.LightMode #frontpage .RightCol h3
{
	border-bottom: 1px dotted #222;
}

.LightMode #frontpage img
{
	filter: none;
}

.LightMode #frontpage .Donate
{
	border: 1px solid #5A0000;
}

.LightMode #indexpage .ParentLinks a
{
	color: #5a0000;
}

.LightMode #indexpage .ParentLinks a:hover
{
	color: #d11515;
}

.LightMode #indexpage h3.ListHeader
{
	border-bottom: 1px dotted #222;
}

.LightMode #indexpage h4.ListHeader
{
	text-decoration: underline #222 dotted;
}

.LightMode #indexpage .Header a
{
	color: #382806;
}

.LightMode #indexpage .Header a:hover
{
	color: #d11515;
}

.LightMode #uploadpage .FormButton
{
	background-color: white;
	color: black;
}

.LightMode #uploadpage .FormTable .FormField
{
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

.LightMode #unboxpage .InputLine
{
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

.LightMode #unboxpage .Button
{
	border: 1px solid black;
	background: white;
	color: black;
}

.LightMode #unboxpage .Header a
{
	color: #382806;
}

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

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

body.DarkMode
{
	background-color: #666;
}

.DarkMode .Page
{
	background-color: #262205;
	color: #fffdf0;
	border-left: 2px solid #000;
	border-right: 1px solid #946e67;
}

.DarkMode a
{
	color: #ff6840;
}

.DarkMode a:visited
{	
	color: #ff8f70;
}

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

.DarkMode blockquote
{
	background-color: #2f2a05;
	color: #fffdf0;
	border: 1px dotted #666;
}

.DarkMode h1, .DarkMode h2, .DarkMode h3, .DarkMode h4
{
	color: #fff8dd;
}

.DarkMode .FootWidget
{
	border: 1px dotted #FFF;
	background-color: #262205;
	color: #fffdf0;
}

.DarkMode .FootWidget:hover
{
	background-color: #faf5e9;
	color: #060500;
}

.DarkMode .Footer a
{
	color: #ff8f70;
}

.DarkMode .Footer a:hover
{
	color: #ff4820;
}

.DarkMode .Date
{
	color: #987;
}

.DarkMode a.PermaLink
{
	color: #984030;
}

.DarkMode a.PermaLink:hover
{
	color: #ff4820;
}

.DarkMode #frontpage .RightCol h3
{
	border-bottom: 1px dotted #AAA;
}

.DarkMode #frontpage img
{
	filter: invert(100%);
}

.DarkMode #frontpage .Donate
{
	border: 1px solid #FFDD88;
}

.DarkMode #indexpage .ParentLinks a
{
	color: #ff8f70;
}

.DarkMode #indexpage .ParentLinks a:hover
{
	color: #ff4820;
}

.DarkMode #indexpage h3.ListHeader
{
	border-bottom: 1px dotted #AAA;
}

.DarkMode #indexpage h4.ListHeader
{
	text-decoration: underline #DDD dotted;
}

.DarkMode #indexpage .Header a
{
	color: #fff8dd;
}

.DarkMode #indexpage .Header a:hover
{
	color: #ff4820;
}

.DarkMode #uploadpage .FormButton
{
	background-color: black;
	color: white;
}

.DarkMode #uploadpage .FormTable .FormField
{
	background-color: black;
	color: white;
	border: 1px solid #555;
}

.DarkMode #unboxpage .InputLine
{
	background-color: black;
	color: white;
	border: 1px solid #555;
}

.DarkMode #unboxpage .Button
{
	border: 1px solid white;
	background: black;
	color: white;
}

.DarkMode #unboxpage .Header a
{
	color: #fff8dd;
}

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

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

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

body.SysMode
{
	background-color: #333;
}

.SysMode .Page
{
	background-color: #faf5e9;
	color: #060500;
	border-left: 2px solid #fff;
	border-right: 1px solid #78714b;
}

.SysMode a
{
	color: #b50000;
}

.SysMode a:visited
{	
	color: #803030;
}

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

.SysMode blockquote
{
	background-color: #f5f0e6;
	color: #000;
	border: 1px dotted #aaa;
}

.SysMode h1, .SysMode h2, .SysMode h3, .SysMode h4
{
	color: #382806;
}

.SysMode .FootWidget
{
	border: 1px dotted #000;
	background-color: #faf5e9;
	color: #060500;
}

.SysMode .FootWidget:hover
{
	background-color: #262205;
	color: #fffdf0;
}

.SysMode .Footer a
{
	color: #5a0000;
}

.SysMode .Footer a:hover
{
	color: #d11515;
}

.SysMode .Date
{
	color: #777;
}

.SysMode a.PermaLink
{
	color: #DAA;
}

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

.SysMode #frontpage .RightCol h3
{
	border-bottom: 1px dotted #222;
}

.SysMode #frontpage img
{
	filter: none;
}

.SysMode #frontpage .Donate
{
	border: 1px solid #5A0000;
}

.SysMode #indexpage .ParentLinks a
{
	color: #5a0000;
}

.SysMode #indexpage .ParentLinks a:hover
{
	color: #d11515;
}

.SysMode #indexpage h3.ListHeader
{
	border-bottom: 1px dotted #222;
}

.SysMode #indexpage h4.ListHeader
{
	text-decoration: underline #222 dotted;
}

.SysMode #indexpage .Header a
{
	color: #382806;
}

.SysMode #indexpage .Header a:hover
{
	color: #d11515;
}

.SysMode #uploadpage .FormButton
{
	background-color: white;
	color: black;
}

.SysMode #uploadpage .FormTable .FormField
{
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

.SysMode #unboxpage .InputLine
{
	background-color: white;
	color: black;
	border: 1px solid #BBB;
}

.SysMode #unboxpage .Button
{
	border: 1px solid black;
	background: white;
	color: black;
}

.SysMode #unboxpage .Header a
{
	color: #382806;
}

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

}

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

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

body.SysMode
{
	background-color: #666;
}

.SysMode .Page
{
	background-color: #262205;
	color: #fffdf0;
	border-left: 2px solid #000;
	border-right: 1px solid #946e67;
}

.SysMode a
{
	color: #ff6840;
}

.SysMode a:visited
{	
	color: #ff8f70;
}

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

.SysMode blockquote
{
	background-color: #2f2a05;
	color: #fffdf0;
	border: 1px dotted #666;
}

.SysMode h1, .SysMode h2, .SysMode h3, .SysMode h4
{
	color: #fff8dd;
}

.SysMode .FootWidget
{
	border: 1px dotted #FFF;
	background-color: #262205;
	color: #fffdf0;
}

.SysMode .FootWidget:hover
{
	background-color: #faf5e9;
	color: #060500;
}

.SysMode .Footer a
{
	color: #ff8f70;
}

.SysMode .Footer a:hover
{
	color: #ff4820;
}

.SysMode .Date
{
	color: #987;
}

.SysMode a.PermaLink
{
	color: #984030;
}

.SysMode a.PermaLink:hover
{
	color: #ff4820;
}

.SysMode #frontpage .RightCol h3
{
	border-bottom: 1px dotted #AAA;
}

.SysMode #frontpage img
{
	filter: invert(100%);
}

.SysMode #frontpage .Donate
{
	border: 1px solid #FFDD88;
}

.SysMode #indexpage .ParentLinks a
{
	color: #ff8f70;
}

.SysMode #indexpage .ParentLinks a:hover
{
	color: #ff4820;
}

.SysMode #indexpage h3.ListHeader
{
	border-bottom: 1px dotted #AAA;
}

.SysMode #indexpage h4.ListHeader
{
	text-decoration: underline #DDD dotted;
}

.SysMode #indexpage .Header a
{
	color: #fff8dd;
}

.SysMode #indexpage .Header a:hover
{
	color: #ff4820;
}

.SysMode #uploadpage .FormButton
{
	background-color: black;
	color: white;
}

.SysMode #uploadpage .FormTable .FormField
{
	background-color: black;
	color: white;
	border: 1px solid #555;
}

.SysMode #unboxpage .InputLine
{
	background-color: black;
	color: white;
	border: 1px solid #555;
}

.SysMode #unboxpage .Button
{
	border: 1px solid white;
	background: black;
	color: white;
}

.SysMode #unboxpage .Header a
{
	color: #fff8dd;
}

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

}