games/competition2014/Transparent/style.css

/*

Standard CSS file for use with Standard.html and Standard-Source.html. 

*/


body
{
	font-family: Georgia, Palatino, "Times New Roman", Times, serif;
	font-size: 100%;
	-webkit-text-size-adjust: none;
}

.container
{
	margin-top: 2em;
}

/* 
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
{
	width: 12.6em;
	margin-top: 2em;
	margin-left: 1em;
	float: left;
	clear: left;
	text-align: 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: 15.4em;
	width: 33em;
	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: 15.4em;
	width: 33em;
	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 15.4em;
	width: 33em;
}

.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
{
	width: 13em;
	float: left;
	clear: left;
	text-align: right; 
	margin-top: 2.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: .5em; }

/* 
Source formatting applies to the source text on generated pages. 
*/

.source
{
	margin-top: 1.4em;
	margin-left: 15.4em;
	width: 33em;
	line-height: 1.4;
}

.sourceintroduction
{
	margin-left: 15.4em;
	width: 33em;
}

.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
{
	width: 12.6em;
	margin-top: 2em;
	margin-left: 1em;
	float: left;
	clear: left;
	text-align: 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;
	width: 33em;
}

.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
{
	position: fixed;
}
.play .links
{
	margin-top: 200px;
	position: fixed;
}

.interpretercredit
{
	bottom: 1em;
	font-size: 80%;
	position: fixed;
}

#gameport
{
	background: white;
	bottom: 0px;
	left: 15.4em;
	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, .links, .about, .playinfo, .source, .sourceintroduction, .sourcecoverimage, .notes
	{
		float: none;
		margin-left: 1em;
		text-align: left;
	}

	.play .coverimage, .play .links, .play .interpretercredit
	{
		display: none;
	}
	
	#gameport
	{
		left: 0px;
		width: auto;
	}
}