/* CSS file for an Inform 7 website template. This has been modified to provide a single column of fixed width (600px), with a header and footer. Created by Andrew Plotkin (erkyrath@eblong.com). These template files are in the public domain. The header is fixed at 72 pixels high. To change this height, edit edit the four CSS lines labelled "header height" (in style.css) from "72px" to whatever value you choose. The footer, similarly, is fixed at 48 pixels high. Edit the "footer height" lines to change this. Note that in the "play.html" file, the home-page and download links are in the header rather than in the content div. Also note that the "index.html" and "source.html" files use relative positioning for the header, content, and footer. The "play.html" file uses absolute positioning. This is because the document pages need a document scroll bar (for example, for long source text listings), whereas the gameplay page must *not* have a document scroll bar -- all game scrolling occurs in the gameport div. A consequence is that if the document pages *aren't* long (the index.html usually isn't) then the footer can appear rather high up. If you don't like this, you can delete the footer entirely on those pages. Just delete the footer stanza from index.html and source.html:
You can also delete the footer from play.html. In that case, you will also have to reduce the footer height to 0px. */ body { font-family: Georgia, Palatino, "Times New Roman", Times, serif; font-size: 100%; -webkit-text-size-adjust: none; margin: 0px; top: 0px; bottom: 0px; width: 100%; background: white; color: black; overflow: hidden; background-image:url(Masque.jpg); background-size: cover; } /* Used in index.html and source.html. */ #pageheader { width: 100%; top: 0px; height: 0px; /* header height */ margin: 0px; background: white; /* this color fills the header, all the way across */ } /* Used in play.html. */ #header { position: absolute; width: 100%; top: 0px; height: 0px; /* header height */ margin: 0px; background: white; /* this color fills the header, all the way across */ } /* Used in all pages -- defines the width. */ #subheader { position: relative; width: 600px; /* column width */ height: 100%; margin: auto; /* a background color here will fill the header at a width of 600px */ } /* Used in index.html and source.html. */ #pagefooter { width: 100%; height: 0px; /* footer height */ margin: 0px; margin-top: 2em; background: #EEE; /* this color fills the footer, all the way across */ } /* Used in play.html. */ #footer { position: absolute; width: 100%; bottom: 0px; height: 0px; /* footer height */ margin: 0px; background: #EEE; /* this color fills the footer, all the way across */ } /* Used in all pages -- defines the width. */ #subfooter { position: relative; width: 600px; /* column width */ height: 100%; margin: auto; /* a background color here will fill the footer at a width of 600px */ } /* This class is used for the sample header and footer text. You can replace it with your own CSS classes. */ .framelabel { padding-top: 1em; font-size: 14px; font-style: italic; } /* Used in index.html and source.html. */ #pagecolumn { width: 100%; top: 0px; /* header height */ margin: 0px; } /* Used in play.html. */ #column { position: absolute; width: 100%; top: 0px; /* header height */ bottom: 0px; /* footer height */ margin: 0px; } /* Used in all pages -- defines the width. */ #subcolumn { position: relative; width: 600px; /* column width */ height: 100%; margin: auto; } .container { } /* Paragraph features defined here apply without distinction to blurb and source paragraphs. */ p { font-size: 1em; line-height: 1.4; } /* Here we get rid of underlining for links, and provide a more subdued color scheme than the bright-blue HTML standard. Best color schemes are likely to vary depending on cover art. */ a { text-decoration: none; color: #FF0; } a:visited { text-decoration: none; color: #FF6; } a:hover { text-decoration: none; color: #FF6C; } .coverimage { margin-top: 3em; margin-right: 1em; text-align: right; float: right; } /* Here we make invisible the one-pixel border that currently goes around the cover image. */ .coverimage a { font-style: normal; font-variant: normal; font-weight: normal; color: #FFF; } /* The introduction formatting applies to the title, author name, and release number, here presented at the top of the page. To change the appearance of specific elements, tweak h1 for the title h2 for the author name .bibliography for the release information */ .introduction { padding-top: 2.4em; margin-left: 1em; line-height: 1; text-align: left; } /* These set the sizes for the title (h1) and the author name (h2). The ideal font-size for h1 may vary quite a bit depending on how long the game's title is: larger for one-word titles, smaller for longer titles. Should we wish to remove the title entirely and allow the cover art alone to represent the game, we need only add the line "display: none;" to the definition of h1. */ h1 { font-size: 2em; } h2 { font-size: 1em; line-height: .25;} /* The about formatting applies to blurb information. */ .about { margin-top: 2.8em; margin-left: 1em; text-align: left; } /* By setting about p and about p + p, we instruct the first paragraph of the blurb to be unindented but subsequent paragraphs to be indented a small distance. */ .about p { margin-bottom: 0; } .about p + p { text-indent: 1.4em; margin-top: 0; } /* Playinfo affects the paragraph at the bottom of the home-page that supplies the IFID for the game and suggests interpreters for the author to use. */ .playinfo { margin: 1em 0px 0px 1em; } .playinfo p { font-size: .75em; } /* The links formatting applies to the story file and auxiliary links found on the home page, and to the Contents, Next, and Previous links on the source pages. Here we arrange for them to appear in a column at the left side of the page. */ .links { font-size: 0.8em; } .links li { list-style-type: none; list-style-position: default; padding: .4 em; } /* The filetype id applies only to the little (blorb), (pdf), and similar denotations found on the links. Here we make these appear smaller than the surrounding text. In order to get rid of them entirely, we would add "display: none;" to our filetype definition. */ span.filetype { font-size: .75em; } /* Source formatting applies to the source text on generated pages. */ .source { margin-top: 1.4em; margin-left: 1em; line-height: 1.4; } .sourceintroduction { margin-left: 1em; } .sourceintroduction h1 { padding-top: 2.8em; font-size: 1em; line-height: 1; text-align: right; text-decoration: none; font-weight: normal; font-style: italic; } .sourceintroduction h2 { display: none; } .sourcecoverimage { margin-top: 1em; margin-left: 1em; text-align: right; float: right; } /* Here we make invisible the one-pixel border that currently goes around the cover image. */ .sourcecoverimage a { font-style: normal; font-variant: normal; font-weight: normal; color: #FFF; } .sourcebibliography { display: none; } span.quote { color: #369; } span.comment { color: #390;} span.substitution { color: #69B; font-variant: small-caps; } span.i6code { color: #666; font-family: monospace; } span.columnhead { font-style: italic; font-size: 1em; } span.heading { font-weight: bold; } .source td { padding-top: .7em; padding-bottom: .7em; padding-right: 1.4em; font-size: .75em; text-align: left; vertical-align: top; } /* We could alter the following in order to make the footnote links in the source text appear different from other links, but otherwise they will be the same color as other links -- which is fine as a default. */ span.notecue { font-size: .75em; vertical-align: super; } /* Here we tell the elements of the table of contents not to be listed with bullets because this tends to produce considerable visual clutter especially with large project files. */ .source li { list-style-type: none; list-style-position: default; } /* Notes applies to footnotes on the source text. */ .notes { margin-left: 16.8em; } .notes p { text-indent: -1.4em; font-size: .75em; } .notesheading { font-style: italic; } p.indent0 { margin-bottom: 0; } p.indent1 { padding-left: 2.8em; text-indent: -.7em; margin-bottom: 0; margin-top: 0; } p.indent2 { margin-bottom: 0; padding-left: 5.6em; text-indent: -.7em; margin-top: 0; } p.indent3 { padding-left: 8.4em; text-indent: -.7em; margin-bottom: 0; margin-top: 0; } p.indent4 { margin-bottom: 0; padding-left: 11.2em; text-indent: -.7em; margin-top: 0; } p.indent5 { padding-left: 14em; text-indent: -.7em; margin-bottom: 0; margin-top: 0; } p.indent6 { margin-bottom: 0; padding-left: 16.8em; text-indent: -.7em; margin-top: 0; } p.indent7 { padding-left: 19.6em; text-indent: -.7em; margin-bottom: 0; margin-top: 0; } p.indent8 { margin-bottom: 0; padding-left: 22.4em; text-indent: -.7em; margin-top: 0; } p.indent9 { padding-left: 25.2em; text-indent: -.7em; margin-bottom: 0; margin-top: 0; } /* Styles for play.html */ .play .coverimage { } .play .links { } .interpretercredit { bottom: 1em; font-size: 80%; position: fixed; } #gameport { background: white; bottom: 0px; left: 1em; line-height: 1.4; margin: 0px; position: absolute; right: 0px; top: 0px; } /* Styles for mobile browsers: change to a one-column layout. */ @media screen and (max-device-width: 480px) { .coverimage, .introduction, .about, .playinfo, .source, .sourceintroduction, .sourcecoverimage, .notes { float: none; margin-left: 1em; margin-right: 1em; text-align: left; } .play .coverimage, .play .interpretercredit { display: none; } #gameport { left: 0px; width: auto; } #subheader, #subfooter, #subcolumn { width: 320px; } .framelabel, .play .links { font-size: 12px; padding-left: 10px; padding-right: 10px; } }