/*

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

*/

html {
    background-color: #3f3f3f;
}

body
{
	/* font-family: Georgia, Palatino, "Times New Roman", Times, serif; */
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	-webkit-text-size-adjust: none;
	margin: 0px;
	/* top: 0px;
	bottom: 0px; */
	background: #3f3f3f;
	color: black;
}

body.red-scheme a { color: #DC143C;!important;}
body.red-scheme a:hover {color: #FF6347;!important;}
body.redtext .Style_input { color: #DC143C;!important;}
body.redtext .BufferWindow .Input{ color: #DC143C;!important;}

body.black-scheme a { color: #000000; !important;}
body.black-scheme a:hover {color: #708090;!important;}
body.blacktext .Style_input { color: #000000;!important;}
body.blacktext .BufferWindow .Input{ color: #000000;!important;}

body.white-scheme a { color: #FFFFFF; !important;}
body.white-scheme a:hover {color: #C0C0C0;!important;}
body.whitetext .Style_input { color: #FFFFFF;!important;}
body.whitetext .BufferWindow .Input{ color: #FFFFFF;!important;}

body.grey-scheme a { color: #778899; !important;}
body.grey-scheme a:hover {color: #87CEEB;!important;}
body.greytext .Style_input { color: #778899;!important;}
body.greytext .BufferWindow .Input{ color: #778899;!important;}

body.blue-scheme a { color: #369; !important;}
body.blue-scheme a:hover {color: #B0E0E6;!important;}
body.bluetext .Style_input { color: #369;!important;}
body.bluetext .BufferWindow .Input{ color: #369;!important;}


/* Used in index.html and source.html. */
#pageheader {
	width: 100%;
	top: 0px;
	height: 72px; /* 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: 0px; /* 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: 400px;
	height: 570px;
	top: 50%; /* header height */
	/* bottom: 80px; footer height */
	left: 50%;
	/* margin: 0px; */
	margin-left: -360px;
	margin-top: -295px;
}

/* Used in all pages -- defines the width. */
#subcolumn {
	position: relative;
	width: 675px; /* 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: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: 0.8;
	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;
	}
}


.resize {
	position: absolute;
	width: 1280px; 
	height: 733px;
	top: 50%;
	left: 50%;
	z-index: -2;
	margin-left: -640px;
	margin-top: -366px;
}

.presize
{
	line-height: 0.2;
	padding: 0px 0px 0px 5px;
	}
.planet
{
	z-index: -1;
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-left: 375px;
	margin-top: -265px;
}

.charname
{
	z-index: 0;
	position: absolute;
	color: white;
	top: 50%;
	left: 50%;
	width: 16.5em;
	text-align: center;
	margin-left: 350px;
	margin-top: 322px;
}

.planetname
{
	z-index: 0;
	position: absolute;
	color: white;
	top: 50%;
	left: 50%;
	width: 16.5em;
	text-align: center;
	margin-left: 350px;
	margin-top: -27px;
}

.orrery
{
	z-index: -1;
	position: absolute;
	width: 290px;
	height: 394px;
	top: 50%;
	left: 50%;
	margin-left: -640px;
	margin-top: -29px;
}

.facepic
{
	z-index: -1;
	position: absolute;
	width: 167px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-left: 405px; 
	margin-top: 56px;
}

.logogroup {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -675px;
	margin-top: -360px;
}

.logoloc
{
	z-index: -1;
	position: absolute;
	width: 390px;
	height: 285px;
}
.btngroup {
	position: absolute;
	top: 50%;
	left: 50%;
}
/* Settings Dropdown Button */
.dropbtn {
	position:absolute;
	margin-left: -620px;
	margin-top: -370px;
	z-index: 4;	
    border: none;
    cursor: pointer;
	background-color: Transparent;
	background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
	height:50px;
	width:50px;
	background: url("./Assets/SettingsButton.png");
}
/* Settings Dropdown Button */
.hdropbtn {
	position:absolute;
	margin-left: -570px;
	margin-top: -370px;
	z-index: 4;	
    border: none;
    cursor: pointer;
	background-color: Transparent;
	background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
	height:50px;
	width:50px;
	background: url("./Assets/HelpButton.png");
}
/* Settings Dropdown Button */
.mdropbtn {
	position:absolute;
	margin-left: -520px;
	margin-top: -370px;
	z-index: 4;	
    border: none;
    cursor: pointer;
	background-color: Transparent;
	background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
	height:50px;
	width:50px;
	background: url("./Assets/MapButton.png");
}
/* Dropdown button on hover & focus */
/*.dropbtn:hover, .dropbtn:focus {
/*    background-color: #3e8e41;
/*}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
	margin-left: -630px;
	margin-top: -315px;	
    position: absolute;
	z-index: 2;	
	background: white;
	border-radius: 15px;
	border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    min-width: 220px;
    box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.4);
	transition: all 0.5s ease-in;
}

/* Dropdown Content (Hidden by Default) */
.hdropdown-content {
    display: none;
	margin-left: -600px;
	margin-top: -315px;	
    position: absolute;
	z-index: 2;	
	background: white;
	border-radius: 15px;
	border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    width: 970px;
	height: 595px;
    box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.4);
	transition: all 0.5s ease-in;
}
/* Dropdown Content (Hidden by Default) */
.mdropdown-content {
    display: none;
	margin-left: -600px;
	margin-top: -315px;	
    position: absolute;
	z-index: 2;	
	background: white;
	border-radius: 15px;
	border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    width: 750px;
	height: 625px;
    box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.4);
	transition: all 0.5s ease-in;
}

.ht_content{
	border-style: solid;
	border-width: 1px;
	border-color: #A9A9A9;
	border-radius: 25px;
	width: 955px;
	height: 580px;
	font-size: 1.1em;
	margin-left:6px;
	margin-top:6px;
	font-family: 'Roboto', sans-serif;
}
.lframe {
	margin-top: 50px;
	margin-left: 70px;
	width: 42%;
	float: left;
}
.rframe {
	margin-top: 50px;
	margin-right: 20px;
	width: 44%;
	float: right;
}
.htopics {
	margin-top: 20px;
	margin-left: 20px;	
	line-height: 200%;
	color: #369;
}
.dropdown-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 182px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.dropdown-content::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 180px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.hdropdown-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 910px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.hdropdown-content::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 908px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.mdropdown-content::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 635px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.mdropdown-content::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 633px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.setcontent {
    width: 200px;
    overflow: hidden;
	margin-bottom: 0em;
	margin-top: 0em;
}

.setcontent img {
    margin-right: 5px;
    float: left;
	margin-bottom: 0em;
	margin-top: 0em;
}

.ttcontent	{
	margin-left: 10px;
	font-size: 0.8em;
	margin-top: 0em;
	margin-bottom: 0em;
}
.bccontent	{
	margin-left: 10px;
	font-size: 0.8em;
	margin-top: 1em;
	margin-bottom: 0em;
}
.tscontent	{
	margin-left: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 0.8em;
	margin-top: 0em;
	margin-bottom: 0em;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.slider {
  width: 150px;
  	margin-left: 20px;
	margin-top: 1px;
/*  margin: 100px auto; */
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #DCDCDC;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 40px;
  height: 18px;
  border-radius: 12px;
  border: 0;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	position: relative;
    background-color: #000000;
	margin-top: 10%;
	margin-left: 19%;
    padding: 20px;
    border: 1px solid #000000;
	border-radius: 25px;
    width: 800px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Content/Box */
.incmodal-content {
	position: relative;
    background-image: url("./Assets/woodtexture.jpg");
	margin-top: 3%;
	margin-left: 10%;
    padding: 20px;
    border: 1px solid #ffffff;
	border-radius: 25px;
    width: 1100px;
	height:	700px	/* Could be more or less, depending on screen size */
}

/* The Close Button */
.incclose {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.incclose:hover,
.incclose:focus {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

.vcontent{
	width: 720px;
	height: 480px;
	z-index: 1;
}

/* Section for the map dropdowns */
/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
	 -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}