html, body
{
	width: 100%;
	background: #000;
	font-family: 'verdana';
	line-height: 1.4em;
	color: #fff;
}

@font-face {
    font-family: Xolonium;
    src: url('../fonts/Xolonium-Regular.otf');
}

.social
{
	position: fixed;
	left: 32px;
	top: 32px;
	z-index: 10;
}

.social .twitter
{
	float: left;
}

.social .twitter span { float: left; width: 32px; height: 32px; background-image: url("../images/social.png"); }
.social .twitter:hover span { background-position: 0 -32px; }
.social .twitter p { float: left; display: inline; font-size: 0.8em; font-family: Xolonium; color: #fff; margin: 4px 0 0 8px; }
.social .twitter:hover p { color: #5ea9dd; }


/* MAIN SITE */
.wrapper
{
	position: relative;
	float: left;
	width: 100%;
	height: 995px;
}

.backdrop, .computers, .website, .overlay, .vignette
{
	width: 100%;
	height: 100%;
	position: absolute;
}

.backdrop
{
	background: url("../images/backdrop.png") no-repeat top center;
	background-attachment: fixed;
}

.computers
{
	background: url("../images/computers.png") no-repeat top center;
}

.vignette
{
	background: url("../images/vignette.png") no-repeat top center;
}

.overlay
{
	pointer-events: none;
	background: url("../images/overlay.png") repeat-y top center;
}

/* CONTENT */

.content
{
	width: 1024px;
	margin: 0 auto;
	margin-top: 60px;
}

.left
{
	width: 24%;
	margin-right: 4%;
	margin-top: 180px;
	float: left;
	display: inline;
}

.center
{
	width: 44%;
	float: left;
}

.right
{
	width: 24%;
	margin-top: 180px;
	float: right;
	display: inline;
}

/* SPECIAL BORDERS */

.border-body
{
	position: relative;
	box-shadow: 0 0 32px #000;
}
.border-horizontal
{
	position: absolute;
	top: -10px;
	left: -6px;
	right: -6px;
	bottom: -10px;
	background: url("../images/borders/top.png") top left repeat-x, 
				url("../images/borders/bottom.png") bottom left repeat-x;
	pointer-events: none;
}
.border-vertical
{
	position: absolute;
	top: 0px;
	left: -10px;
	right: -10px;
	bottom: 0;
	background: url("../images/borders/left.png") top left repeat-y, 
				url("../images/borders/right.png") top right repeat-y;
	pointer-events: none;
}

/* NOISE */
.noise
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/noise.png");
	border: 2px solid rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	pointer-events: none;
}

.scanlines
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/scanlines.png");
	pointer-events: none;
}

/* BANNER */

.banner { background: #000; width: 90%; margin-left: 5%; float: left; }
.banner img { width: 100%; margin: 0; padding: 0; }
.banner .noise { opacity: 0.5; }

/* GAME DESCRIPTION */

.description
{
	width: 100%;
	float: left;
	box-sizing: border-box;

	margin-top: 40px;
	padding: 20px 30px 20px 30px;

	background: #000;
	font-family: Xolonium;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #ccc;
}

.description .noise { opacity: 0.5; }
.description p { margin: 0; padding: 0; text-align: center; }

/* TRAILER */

.trailer
{
	width: 100%;
	float: left;
	margin-top: 40px;
}
.trailer .noise { opacity: 0.5; }

/* DOWNLOAD */

.download
{
	width: 100%;
	float: left;
	margin-top: 30px;
}

.download a
{
	float: left;
	width: 100%;
	margin-bottom: 20px;
	transition: padding 0.25s, margin 0.25s;
}

.download a span
{
	float: left;
	width: 100%;
	background: #000 url("../images/buybg.png") -1024px 0px no-repeat;
	text-align: center;
	text-transform: uppercase;
	font-family: Xolonium;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	padding: 10px 0 10px 0;
	transition: background-position 0.5s;
}

.download a:hover { padding-top: 10px; margin-bottom: 10px; }
.download a:hover span
{
	background-position: 0px 0px;
}

/* SCREENSHOTS */

.screenshots a
{
	position: relative;
	float: left;
	width: 100%;
	opacity: 0.8;
	margin-bottom: 20px;
	border: 4px solid #8d8ec7;
	box-shadow: 0 0 32px #000;

	transition: opacity 0.25s, margin 0.25s;
}

.screenshots a img
{
	width: 100%;
	float: left;
}


.left .screenshots a:nth-child(2) { margin-left: -10px; }
.right .screenshots a:nth-child(2) { margin-left: 10px; }
.left .screenshots a { border-right: 12px solid #8d8ec7; }
.right .screenshots a { border-left: 12px solid #8d8ec7; }

.screenshots a:hover { opacity: 1; }
.left .screenshots a:hover { margin-left: -30px; }
.right .screenshots a:hover { margin-left: 30px; }


/* PATROLS */
.patrols-container
{
	position: absolute;
	width: 100%;
	height: 256px;
	bottom: 0px;
	overflow: hidden;
	pointer-events: none;
}

.patrols
{
	position: absolute;
	left: 50%;
	width: 100%;
}

.sprite
{
	position: relative;
}

.sprite.flip
{
	-ms-transform: scale(-1,1); /* IE 9 */
	-webkit-transform: scale(-1,1); /* Safari */
	transform: scale(-1,1);
}

/* SAMURAI ANIMATIONS */
	.samurai
	{
		position: absolute;
		left: 0px;
		top: 32px;
	}

	.samurai .sprite
	{
		left: -128px;
		width: 256px;
		height: 256px;
	}

		@-webkit-keyframes samurai_walk_right { 100% { background-position: -3840px 0px; } }
		@keyframes samurai_walk_right { 100% { background-position: -3840px 0px; } }
		.samurai .sprite.walk
		{
			background: url("../images/samurai/walk.png") left center;
			-webkit-animation: samurai_walk_right .8s steps(15) infinite;
			animation: samurai_walk_right .8s steps(15) infinite;
		}

		.samurai .sprite.idle
		{
			background: url("../images/samurai/idle.png") left center;
		}

/* GUARD ANIMATIONS */
	.guard
	{
		position: absolute;
		left: 300px;
		top: 32px;
	}

	.guard .sprite
	{
		left: -128px;
		width: 256px;
		height: 256px;
	}

	.guard .sprite.idle
	{
		background: url("../images/guard/idle.png") left center;
	}

/* FOOTER */

.footer
{
	color: #fff;
	width: 100%;
	padding: 80px 0 80px 0;
	float: left;
	background: #000;
	position: relative;
}

.footer-content
{
	width: 320px;
	margin: 0 auto;
}

.footer span { float: left; display: block; clear: left; }
.footer .gameby  { text-transform: lowercase; }
.footer .author { text-transform: uppercase; margin-left: 60px; }
.footer .author a { color: #d7344c; text-decoration: none; }
.footer .cooperation  { text-transform: lowercase; margin-left: 40px; }
.footer .devolver { text-transform: uppercase; margin-left: 120px; }
.footer .devolver a { color: #7f9c9c; text-decoration: none; }
.footer span a:hover { color: #254e4e; }

/* responsive! */

@media(max-width: 1100px) {

	.content
	{
		width: 90%;
	}

	.wrapper
	{
		min-width: 720px;
	}

}