/* style.css for play.org */
body {background-color:#fefefe; color:#242; font-family:helvetica,sans-serif}

/* Accommodate background image: */
body.homepage {background: #fdfffc url(eye-of-emily.jpeg) 4em 4em no-repeat}
body.homepage .tag-line {float:left; display:block; white-space:nowrap;
			 transform:rotate(-0.604deg); padding-top:1em;
			 padding-left:1em; padding-bottom:7em}
.homepage-toc {clear:both; padding-top:30px; padding-left:170px; height:250px}

body.article    {max-width:50em}
body.chronology {max-width:50em}
body.column     {max-width:27em}
body.essay      {max-width:40em}
body.feature    {max-width:50em}
body.fiction    {max-width:40em}
body.links      {max-width:50em}
body.posit      {max-width:40em}
body.poetics    {max-width:50em}

body.proof {font-size:10pt; line-height:2em; font-family:Times,serif; color:black}

/* FIXME: P tags within DIV.title not inheriting DIV's class for NOT() operator?
body.poetics p:not(.title) {white-space:nowrap; font-family:serif; font-size:150%}
*/

.main-logo {float:left; font-weight:bold; border-right: 0.25em solid #242; 
	    padding-top:1.5em; padding-bottom:1.5em; padding-right:0.75ex}
.main-logo a {font-size:150%; text-decoration:none; color:#242}
.main-logo a:link {color:#242}
.main-logo a:visited {color:#242}
.main-logo a:hover {color:green}
body.homepage .main-logo a {font-size:200%}

.main-logo + div.title {float:left; text-align:left; margin-left:1em;
			min-width:27%; max-width:65%}

div.title + * {clear:both}

.toc {clear:both; border:none;
      padding-top:2em; padding-bottom:2em; padding-left:10em}

.toc {font-family:helvetica,arial,sans-serif; font-size:80%}
.toc a {text-decoration:none}
.toc ul,ol li {line-height:1em}

pre.dots {text-align:center}

body.chronology h2 a {text-decoration:none}
body.chronology h2 a:link {color:#242}
body.chronology .stub {max-width:50em; padding-top:2em}
body.chronology .column-stub  {max-width:27em}
body.chronology .essay-stub   {max-width:40em}
body.chronology .fiction-stub {max-width:40em}
body.chronology .posits-stub  {max-width:40em}
body.chronology .date {padding-left:3em}
body.chronology .revisions {padding-left:3em; color:grey}
body.chronology .nav {text-align:center; padding:3em}
body.chronology .nav a {text-decoration:none}
body.chronology .nav a:link {color:#242}
body.chronology .older {font-variant:small-caps; padding:1em}
body.chronology .newer {font-variant:small-caps; padding:1em}

body.column img {padding:1ex}

body.links .heading {font-size:120%; font-weight:bold}
body.links .subheading {font-size:110%; font-weight:bold}
body.links .subsubheading {font-weight:bold}

.article-list, .dir {clear:both; padding-top:1em}
.article-list dl dt, .dir dt {padding-top:1em}

.highlight {background-color:#e0e0e0}

/*
p.dropcap:first-child:first-letter {initial-letter:2}
*/
.dropcap p:first-child:first-letter {float:left; font-size:250%; line-height:300%}

.copr {clear:both; text-align:right; font-size:75%;
       border-top:solid lightgrey 1px; color:grey}

.copr a, .copr a:link, .copr a:visited, .copr a:active {text-decoration:none; color:grey}
.copr a:hover {color:#242}

@media only screen and (min-device-width:600px) {
    body.article, body.chronology, body.column, body.essay,
    body.feature, body.fiction, body.links,
    body.posit {margin-left:10%; margin-right:10%}
    body.poetics {margin-left:15%; margin-right:15%}
}

@media print {
    body {font-size:9pt; background-color:white; color:black}
}
@media (prefers-color-scheme: dark) {
    body {color:#fefefe; background-color:#242}
    /* Background image was simply negated, thus less than ideal... */
    body.homepage {background: #020003 url(eye-of-emily-DARK-MODE.jpeg)
                                       4em 4em no-repeat}
    .main-logo {border-right: 0.25em solid #fefefe}
    .main-logo a {color:white}
    .main-logo a:link {color:white}
    .main-logo a:visited {color:white}
    .main-logo a:hover {color:black; background-color:white}
    a {color:white}
    a:link {color:white}
    a:visited {color:white}
    a:hover {color:black; background-color:white}
    body.chronology h2 a:link {color:white}
    body.chronology .nav a:link {color:white}
    .copr a, .copr a:link, .copr a:visited, .copr a:active {color:lightgrey}
    .copr a:hover {color:black; background-color:white}
}