
@font-face {
	font-family: "FiraSans";
	src: url('fonts/FiraSans-Regular.ttf');
}
@font-face {
	font-family: "FiraSans";
	font-weight:light;
	src: url('fonts/FiraSans-Light.ttf');
}
@font-face {
	font-family: "OpenSans";
	src: url('fonts/OpenSans-Regular-webfont.ttf');
}
@font-face {
	font-family: "OpenSans";
	font-weight:light;
	src: url('fonts/OpenSans-Light-webfont.ttf');
}
@font-face {
	font-family: "OpenSans";
	font-weight:bold;
	src: url('fonts/OpenSans-Bold-webfont.ttf');
}

body
{
	background:url('images/bg.jpg') repeat;
	width:100%;
}

#container
{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}

#head
{
	position:fixed;
	width:100%;
	top:0px;
	height:3em;
background-image: linear-gradient(top, rgb(255,149,0) 32%, rgb(230,96,0) 100%);
background-image: -o-linear-gradient(top, rgb(255,149,0) 32%, rgb(230,96,0) 100%);
background-image: -moz-linear-gradient(top, rgb(255,149,0) 32%, rgb(230,96,0) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,149,0) 32%, rgb(230,96,0) 100%);
background-image: -ms-linear-gradient(top, rgb(255,149,0) 32%, rgb(230,96,0) 100%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.32, rgb(255,149,0)),
	color-stop(1, rgb(230,96,0))
);
}

#head h1
{
	font-family: "OpenSans", sans-serif;
	font-size: 1.8em;
	text-align: center;
	margin-left: 0;
	margin-right:0;
	padding-top:8px;
	color:#ffffff;
}

#navigation
{
	margin-top:60px;
}

#story
{
	background:rgba(0,0,0,0.8);
	width:90%;
	padding:60px 10px;
	height:auto;
	margin:auto;
}

.button
{
	width:95%;
	padding-top:15px;
	height:35px;
	margin-right: 10px;
	margin-left:10px;
	margin-bottom:5px;
	background:rgba(255,149,0,0.6);
}

.button p
{
	font-family: "FiraSans", sans-serif;
	font-weight: light;
	font-size:1.5em;
	text-shadow:0px 1px 0px #000000;
	text-align:center;
	color:#ffffff;
}

a
{
	text-decoration: none;
}

#story h2
{
	font-family: "FiraSans", sans-serif;
	font-size:1.6em;
	text-shadow:0px 1px 0px #000000;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	color:#0095DD;
}

#story p
{
	font-family: "OpenSans", sans-serif;
	font-size:0.9em;
	text-align:justify;
	color:#ffffff;
	line-height:1.3;
}

#story img
{
	max-width: 60%;
}

#story table,tr,th,td
{
	border:1px solid white;
	padding:5px;
}

#back
{
	float:left;
	height:3em;
	width:3em;

	background-image: linear-gradient(bottom, rgb(0,147,221) 41%, rgb(0,82,159) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,147,221) 41%, rgb(0,82,159) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,147,221) 41%, rgb(0,82,159) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,147,221) 41%, rgb(0,82,159) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,147,221) 41%, rgb(0,82,159) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.41, rgb(0,147,221)),
	color-stop(1, rgb(0,82,159))
);
}

#back p
{
	font-family: "FiraSans", sans-serif;
	font-size:3em;
	text-shadow:0px 1px 0px #000000;
	text-align:center;
	color:#ffffff;
}