/*************************************************************************
	Altered from Normailize.css v2.1.3 | MIT License | git.io/normalize
**************************************************************************/
article,aside,details,figcaption,figure,header,footer,hgroup,main,nav,section,summary {
    display: block;
}
[hidden], template {
    display: none;
}
html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}
body {
    margin: 0;
	font-size: 16px;
	font-family: Verdana, Geneva, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}
a {
    background: transparent;
}
a:focus {
    outline: thin dotted;
}
a:active,
a:hover {
    outline: 0;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b,
strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
mark {
    background: #ff0;
    color: #000;
}
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}
button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}
button,
input {
    line-height: normal;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
	background-color: #99ccff;
	padding: 5px 10px;
	font-weight: 700;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input.contactform {
	width: 95%;
	max-width: 500px;
	padding: 5px;
	margin: 10px 0 5px;
}
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
	width: 95%;
	height: 300px;
	padding: 5px;
	margin: 10px 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/** Images **/
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft {
	margin: 5px 20px 5px 0;
}
img.alignright {
	margin: 5px 0 5px 20px;
}
img.aligncenter {
	margin: 5px auto;
}
img.alignnone {
	margin: 5px 0;
}

/******************************
			Header 
******************************/
#masthead {
	width: 100%;
	height: auto;
}
.logo {
	width: 100%;
	max-width: 1000px;
	min-width: 300px;
	height: auto;
	margin: 50px auto 10px;
	position: relative;
	z-index: -99;
}
.logo img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: -99;
}
.header-container {
	top: 20px;
	left: 20px;
	position: absolute;
	z-index: 99;
}
.site-title,
.page-title {
	font-size: 1.5em;
	margin: 0 0 5px;
}
.site-description,
.page-description {
	font-size: 1em;
	margin: 0 0 10px;
	color: #777;
}
/** Main Navigation **/
#main-navigation {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: auto;
	background: #eee;
	border-bottom: 1px solid #bebebe;
}
.nav-items {
	width: 100%;
	max-width: 1000px;
	min-width: 300px;
	margin: 0 auto;
	color: #474747;
}
.nav-items li {
	display: inline-block;
}
.nav-items li a {
	display: block;
	padding: 15px;
	text-decoration: none;
}
.nav-items li a, .nav-items li a:visited {
	color: #474747;
}
.nav-items li a:hover {
	background: #bebebe;
}

/******************************
			Content 
******************************/

#page {
	width: 100%;
	max-width: 1000px;
	min-width: 300px;
	position: relative;
	z-index: 99;
	padding: 0 0 150px;
	margin: 0 auto;
}
.content {
	width: 90%;
	margin: 0 auto;
}
p {
	margin: 0 0 15px;
	line-height: 1.7em;
	font-family: Verdana, Geneva, sans-serif;
}
.content li {
	line-height: 1.5em;
	font-size: 16px;
	margin: 0 10px 10px;
}
.separator {
	padding: 20px 0 10px;
	border-bottom: 1px solid #bebebe;
}
.separator:last-child {
	border-bottom: none;
}
.story-info {
	margin: 20px 0 50px;
}
.quick-info {
	font-size: 13px;
	color: #666;
}
.credits {
	margin: 60px 0 0;
	padding: 20px 0;
	border-top: 1px solid #bebebe;
	text-align: center;
}
.credits p {
	margin: 0 0 20px;
}
.backbutton,
.nextbutton {
	display: inline-block;
	text-decoration: none;
	padding: 15px;
	color: #000;
	font-weight: 700;
	width: 40%;
}
.backbutton {
	background: #99ccff;
}
.nextbutton {
	background: #ff944d;
}
.spoiler {
	background-color: #666;
	transition: background-color 1s linear;
	cursor: pointer;
	padding: 2px 5px;
}
.spoiler:hover,
.spoiler:active {
	background-color: transparent;
}
.to-the-story {
	color: #444;
	text-decoration: none;
}
.to-the-story:hover,
.to-the-story:active {
	color: #6495ed;
	transition: color 0.5s linear;
}

/******************************
			Footer 
******************************/
#colophon {
	position: relative;
	z-index: 99;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100px;
	height: auto;
	background: #878787;
	color: #202020;
	border-top: 1px solid #474747;
}
#colophon a {
	text-decoration: none;
	font-weight: 700;
	color: #2a2a2a;
	text-shadow: 1px 1px #a5a5a5;
}
#colophon a:hover {
	color: #f8f8f8;
	text-shadow: 1px 1px #2a2a2a;
}
.footer-links {
	float: left;
	font-weight: 700;
}
.footer-links h4 {
	text-transform: uppercase;
	font-size: 1.3em;
}
.footer-links ul {
	margin: 0;
	padding: 0;
}
.footer-links li {
	list-style-type: none;
	margin: 0;
	padding: 2px;
}
.site-info {
	font-size: 14px;
	padding: 20px 25px 5px;
	text-align: center;
}
/******************************
		Media Queries
******************************/
@media (min-width: 1001px) {
	body {
		background: url(../images/logo-bg.png) 0 50px repeat-x;
	}
}
@media (min-width: 970px) {
	.footer-links:first-child {
		margin-left: 110px;
	}
	.footer-links {
		font-size: 1em;
	}
}
@media (min-width: 801px) {
	.header-container {
		top: 20px;
		left: 250px;
	}
	.footer-links h4 {
		font-size: 1.1em;
	}
	.footer-links {
		width: 240px;
		padding: 0 10px;
		font-size: 0.9em;
	}
}
@media (max-width: 800px ) {
	.header-container {
		top: 20px;
		left: 200px;
	}
	.footer-links h4 {
		font-size: 1.1em;
	}
	.footer-links {
		width: 210px;
		padding: 0 10px;
		font-size: 0.9em;
	}
}
@media (max-width: 700px){
	.header-container {
		position: relative;
		left: 0;
		top: 0;
		margin: 60px 60px 20px;
	}
	.backbutton,
	.nextbutton {
		width: 90%;
		margin: 5px 0;
	}
	.footer-links {
		width: 80%;
		font-size: 1em;
		padding: 0 15px;
	}
}
@media (max-width: 500px) {
	.header-container {
		margin: 60px 20px 20px;
	}
	.controlstyle {
		position: relative;
	}
}
@media (max-width: 400px) {
	.nav-items {
		width: 100%;
		margin: 0 0 0 -30px;
	}
}