/*

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:

<div id="pagefooter"><div id="subfooter">
  ...
</div></div>

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;
}

/* Used in index.html and source.html. */
#pageheader {
	width: 100%;
	top: 0px;
	height: 0px; /* header height */
	margin: 0px;
	background: #EEE; /* this color fills the header, all the way across */
}

/* Used in play.html. */
#header {
	position: absolute;
	width: 100%;
	top: 0px;
	height: 72px; /* header height */
	margin: 0px;
	background: #EEE; /* 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: 48px; /* 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: 72px; /* header height */
	margin: 0px;
}

/* Used in play.html. */
#column {
	position: absolute;
	width: 100%;
	top: 72px; /* header height */
	bottom: 48px; /* 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: #369;
}

a:visited
{
	text-decoration: none;
	color: #006;
}

a:hover
{
	text-decoration: none;
	color: #33C;
}

.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;
	}
}