/********************************************************************
 * General
********************************************************************/

#wrapper {
	max-width: 1023px;
    width: 100%;
}

/********************************************************************
 * Header
********************************************************************/

.header {
	max-width: 1023px;
	width: 100%;
	height: 280px;
}

.logo {
	left: 10px;
}

.logo img {
	width: 400px;
}

.menu {
	top: 170px;
}

.menuleft {
	width: 70px;
	background: url(../images/menu_left.png) no-repeat top right;
}

.menucenter {
	left: 70px;
	width: 1060px;
}

.menuright {
	width: 70px;
	background: url(../images/menu_right.png) no-repeat top left;
}

.menu ul {
	padding-left: 80px;
}

/****** SPECIAL FIX FOR SCREENS SMALLER THAN 850 PX ******/
@media (max-width: 850px) {
	.menu ul {
	padding-left: 20px;
	}
}

.menu ul li {
	padding-right: 20px;
}

.socialtop {
	top: 170px;
	right: 10px;
}


/********************************************************************
 * Socials Side
********************************************************************/

/********************************************************************
 * Main
********************************************************************/

.mainframe {
	max-width: 1023px;
	width: 100%;
}

.boxcontent img {
	max-width: 710px;
}

/********************************************************************
 * Home
********************************************************************/

.box.trailer {
	height: auto;
}

.intro {
	width: 60%;
}

.trailerpreview {
	width: 100%;
	height: auto;
}

.trailerimage img {
	width: 100%;
	height: 100%;
	border: solid #fff 1px;
}

.trailerplay {
	width: 160px;
	height: 160px;
}

.trailerplay:hover {
	width: 160px;
	height: 160px;
}

.groupimage {
	top: -20px;
	right: -10px;
	width: 39%;
}

.groupimage img {
	width: 100%;
}

.box.homescreenshots, .box.homelatestnews {
	height: auto;
}

.box.homescreenshots .boxcontent {
	text-align: center;
}

.box.homescreenshots img {
	position: relative;
	float: none;
	width: 142px;
	margin: 0 8px 2px 0;
}

.headlines {
	height: auto;
}

.newstabledate {
	display: none;
	width: auto;
}

.newstablebullet {
	width: auto;
	padding-right: 10px;
}

.newstableheadline {
	width: auto;
}

.headlinesmore {
	position: relative;
	top: 20px;
	height: auto;
	margin: 0px 0 30px 0;
}

.newschest {
	right: 20px;
	bottom: -50px;
}

.newschest img {
	width: 120px;
}

.box.twittertimeline, .box.newsletter {
	width: 48%;
	width: calc(50% - 10px);
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
	margin-bottom: 80px;
}

.box.twittertimeline .boxcontent {
	text-align: center;
}

.airship {
	top: -50px;
}

.airship img {
	width: 250px;
}


/********************************************************************
 * About
********************************************************************/

.box.aboutgame, .box.aboutstory {
	height: auto;
}

.aboutimage {
	float: left;
	top: 0;
	width: auto;
}

.abouttext {
	float: none;
	width: 100%;
	border: none;
	padding: 0px;
	margin-top: 10px;
}

.aboutimage, .abouttext {
	height: auto;
}

.aboutimage img {
	float: left;
	padding: 0;
	margin: 10px 10px 5px 0;
}

.characters {
	height: 250px;
}

.charthumb {
	width: 32%;
	height: 200px;
}

.charthumb.left {
	left: 0%;
}

.charthumb.middle {
	left: 34%;
}

.charthumb.right {
	right: 0%;
}

.boxcontent.profile {
	height: auto;
	overflow: hidden;
}

.damion {
	background: url(../images/character_tab_damion.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.layne {
	background: url(../images/character_tab_layne.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.ashly {
	background: url(../images/character_tab_ashly.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.damion.active, .damion:hover {
	background: url(../images/character_tab_damion_selected.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.layne.active, .layne:hover {
	background: url(../images/character_tab_layne_selected.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.ashly.active, .ashly:hover {
	background: url(../images/character_tab_ashly_selected.png) no-repeat left center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.imgdamion, .imglayne, .imgashly {
	top: 0px;
}

.imgdamion img, .imglayne img, .imgashly img {
	top: 0px;
	right: 0px;
	width: 420px;
}

.imgdamion.active, .imglayne.active, .imgashly.active {
	right: 0px;
}

/****** SPECIAL FIX FOR SCREENS SMALLER THAN 920 PX ******/
@media (max-width: 920px) {
	.damion {
		background: url(../images/character_tab_damion.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.layne {
		background: url(../images/character_tab_layne.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.ashly {
		background: url(../images/character_tab_ashly.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.damion.active, .damion:hover {
		background: url(../images/character_tab_damion_selected.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.layne.active, .layne:hover {
		background: url(../images/character_tab_layne_selected.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.ashly.active, .ashly:hover {
		background: url(../images/character_tab_ashly_selected.200.png) no-repeat center center;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}

	.imgdamion img, .imglayne img, .imgashly img{
		width: 360px;
	}
}



/********************************************************************
 * Media
********************************************************************/

.media.screenshots, .media.videos {
	width: 80%;
	min-height: 700px;
}

.media.char img{
	width: 200px;
}

/********************************************************************
 * News
********************************************************************/

/********************************************************************
 * System / Ranking (coming soon placeholders)
********************************************************************/

/********************************************************************
 * Footer
********************************************************************/

/********************************************************************
 * Offline
********************************************************************/

/********************************************************************
 * 404 - Page not found
********************************************************************/

/********************************************************************
 * Back to top link
********************************************************************/