body {
	margin: 0px;
	background: #1A0C0C;
	font: 0.9em 'Droid Sans', Helvetica, Arial, sans-serif;
}

/** Containers */

#bg-cloud-container {
	position: fixed;
	width: 100%;
	z-index: -10;
}

#bg-characters-container {
	position: fixed;
	width:100%;
	height: 100%;
	top: 50px;
	z-index: -8;
}

#logo-container {
	margin-left: auto;
    margin-right: auto;
	width: 702px;
	padding-bottom: 10px;
}
	
#content {
	position:relative;
	top:50px;
	z-index: 0;
	width:1024px;
	margin-left: auto;
    margin-right: auto;
}

.hidden {
	display: none;
}

#header {
	padding-bottom: 32px;
}

#trailer {
	position: relative;
	left:50%;
	margin-left: -320px;
	background: black;
	
	width:640px;
	height:390px;
}
#trailer iframe {
	width:100%;
	height:100%;
}

#comingSoon {
	position: relative;
	
	left:50%;
	margin-left: -320px;
	width:640px;
	
	background: black;
	color: white;
}

#comingSoonContent {
	padding:10px;
	text-align: center;
}

#comingSoonTitle {
	padding-top: 20px;
	padding-bottom: 10px;
}

#SteamLogo {
	display: inline-block;
}

#VitaLogo {
	display: inline-block;
	margin-left: 40px;
}

#SteamLogo img {
	height: 64px;
}

#VitaLogo img {
	height: 64px;
}

#banner {
	margin-top: 60px;
	text-align: center;
}

#banner-l {
	display: inline-block;
	background: url("images/bookend-l.png");
	width: 54px;
	height: 66px;
	margin-right: -4px;
	vertical-align: top;
}

#banner-mid {
	display: inline-block;
	background: url("images/bookend-mid.png");
	background-repeat: repeat-x;
	margin-right: -4px;
	height: 66px;
	vertical-align: top;
	padding-top: 10px;
	color: white;
}

#banner-r {
	display: inline-block;
	background: url("images/bookend-r.png");
	width: 57px;
	height: 66px;
	vertical-align: top;
}

.menu {
	text-align: center;
	margin-bottom: 30px;
}

.menuFixed {
	position: fixed;
	text-align: center;
	margin-bottom: 30px;
}

.menuitem {
	display: inline-block;
	cursor: pointer;
}

.menuFixed  .menuitem {
	display: block;
}

.menuitem-l {
	display: inline-block;
	background: url("images/bookend-l.png");
	width: 54px;
	height: 66px;
	margin-right: -4px;
	vertical-align: top;
}

.menuitem-hover .menuitem-l {
	background: url("images/bookend-hover-l.png");
	background-repeat: repeat-x;
}

.selectedMenu .menuitem-l {
	background: url("images/bookend-hover-l.png");
	background-repeat: repeat-x;
}

.menuitem-mid {
	display: inline-block;
	background: url("images/bookend-mid.png");
	background-repeat: repeat-x;
	margin-right: -4px;
	height: 66px;
	vertical-align: top;
	padding-top: 10px;
	color: white;
	min-width: 60px;
}

.menuitem-hover .menuitem-mid {
	background: url("images/bookend-hover-mid.png");
	background-repeat: repeat-x;
	color: black;
}

.selectedMenu .menuitem-mid {
	background: url("images/bookend-hover-mid.png");
	background-repeat: repeat-x;
	color: black;
}

.menuitem-r {
	display: inline-block;
	background: url("images/bookend-r.png");
	width: 57px;
	height: 66px;
	vertical-align: top;
}

.menuitem-hover .menuitem-r {
	background: url("images/bookend-hover-r.png");
	background-repeat: repeat-x;
}

.selectedMenu .menuitem-r {
	background: url("images/bookend-hover-r.png");
	background-repeat: repeat-x;
}

#socialmediabar {
	position: fixed;
	top: 30px;
	right: 0px;
}

.smIcon {
	margin-right: 10px;
	display: inline;
	cursor: pointer;
}

.smLast {
	margin-right: 30px;
}

#aboutPage {
	position: relative;

	margin-left: auto;
    margin-right: auto;
	
	width:1000px;
	margin-bottom: 200px;
	
	color: white;
	background: black;
	padding: 20px;
}

#aboutImg {
	margin-left: auto;
    margin-right: auto;
	width:532px;
}

#featureImg {
	margin-left: auto;
    margin-right: auto;
	width:532px;
}

#mediaPage {
	position:relative;
	
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 200px;
	
	width:1000px;
	
	color: white;
	background: black;
	padding: 20px;
	
	text-align: center;
}

.sectionDivider {
	margin-top: 50px;
}

.paragraph {
	margin: 15px 0px;
}

li {
	margin: 15px 0px;
}

.image {
	display: inline-block;
	padding: 10px;
	margin: 10px;
	border: 1px solid white;
}

#linkIcon {
	display: inline-block;
	background-image: url("images/link.png");
	background-repeat: no-repeat;
	margin-left: 10px;
	
	width: 16px;
	height: 16px;
}

.menuitem-hover #linkIcon {
	background-image: url("images/link-hover.png");
}

/** Lightbox override */

#lightbox {
	top: 100px !important;
	position: fixed !important;
}

/** Characters */

#bg-char-1 {
	position:absolute;
	background-image: url("images/char-dexter.png");
	background-repeat: no-repeat;
	
	width: 688px;
	height: 800px;
	
	left: 50%;
	margin-left: -900px;
	
	z-index: -7;
}

@media screen and ( min-height: 970px ){
    #bg-char-1 {
		top:auto;
		bottom: 200px;
	}
}

#bg-char-2 {
	position:absolute;
	background-image: url("images/char-gustav.png");
	background-repeat: no-repeat;
	
	top: 375px;
	width: 982px;
	height: 595px;
	
	left: 50%;
	margin-left: -1000px;
	
	z-index: -6;
}

@media screen and ( min-height: 970px ){
    #bg-char-2 {
		top:auto;
		bottom: 0px;
	}
}

#bg-char-3 {
	position:absolute;
	background-image: url("images/char-alyssa.png");
	background-repeat: no-repeat;
	
	width: 924px;
	height: 885px;
	
	left: 50%;
	margin-left: 260px;
	
	z-index: -7;
}

@media screen and ( min-height: 970px ){
    #bg-char-3 {
		top:auto;
		bottom: 50px;
	}
}

#bg-char-4 {
	position:absolute;
	background-image: url("images/char-millie.png");
	background-repeat: no-repeat;
	
	top: 375px;
	width: 536px;
	height: 595px;
	
	left: 50%;
	margin-left: 340px;
	z-index: -6;
}

@media screen and ( min-height: 970px ){
    #bg-char-4{
		top:auto;
		bottom: -20px;
	}
}

/** Clouds */

#bg-cloud-1 {
	background-image: url("images/Cloud1-sm.png");
	width: 100%;
	height: 230px;
}

#bg-cloud-2 {
	background-image: url("images/Cloud2-sm.png");
	width: 100%;
	height: 230px;
}

#bg-cloud-3 {
	background-image: url("images/Cloud3-sm.png");
	width: 100%;
	height: 230px;
}

#bg-cloud-4 {
	background-image: url("images/Cloud4-sm.png");
	width: 100%;
	height: 149px;
}

/** Border */
.border {
	background-image: url("images/border.png");
}

.border-corner {
	width: 64px;
	height: 64px;
}

.border-top {
	background-image: url("images/border-top.png");
	position: absolute;
	top:-24px;
	height:24px;
}

.border-bot {
	background-image: url("images/border-bot.png");
	position: absolute;
	bottom:-24px;
	height:24px;
}

.border-left {
	background-image: url("images/border-left.png");
	position: absolute;
	left:-24px;
	width:24px;
}

.border-right {
	background-image: url("images/border-right.png");
	position: absolute;
	right:-24px;
	width:24px;
}

.border-horiz {
	width: 100%;
	left: 0px;
}

.border-vert {
	height: 100%;
	top: 0px;
}

.border-corner-tl {
	position: absolute;
	left: -32px;
	top: -32px;
}

.border-corner-tr {
	position: absolute;
	right: -32px;
	top: -32px;
	background-position: 64px 0px;
}

.border-corner-bl {
	position: absolute;
	left: -32px;
	bottom: -32px;
	background-position: 194px 0px;
}

.border-corner-br {
	position: absolute;
	right: -32px;
	bottom: -32px;
	background-position: 128px 0px;
}