body{
margin: 0;	
}

#wrapper, #footer{
width: 100%;
}

#sub-wrap, #footer-wrap{
max-width: 1050px;
min-width: 400px;
margin: auto;
}

#container, #footer-container{
padding-left: 41px;
}

#sub-container, #footer-sub-container{
padding-right: 41px;
}

#content, #footer-contents{
padding: 20px;
}

#banner-spacer, #header-contents{
width: 584px;
margin: auto;
}

#logo{
width: 584px;
height: 140px;
}

#logo a{
display: block;
width: 584px;
height: 140px;
}

@media screen and (max-width: 700px) {
	#banner-spacer, #header-contents{
	width: 400px;
	height: 96px;
	}

	#logo{
	width: 400px;
	height: 96px;
	}

	#logo a{
	width: 400px;
	height: 96px;
	}
}

@media screen and (max-width: 520px) {
	#banner-spacer, #header-contents{
	width: 300px;
	height: 72px;
	}

	#logo{
	width: 300px;
	height: 72px;
	}

	#logo a{
	width: 300px;
	height: 72px;
	}
}

#breadcrumbs{
clear: both;
}

#breadcrumbs ul{
padding: 0;
}

#breadcrumbs li{
display: inline-block;
margin-right: 5px;
}

#header{
position: absolute;
top: 135px;
width: 100%;
}

@media screen and (max-width: 700px) {
	#header{
	top: 100px;
	}
}

@media screen and (max-width: 520px) {
	#header{
	top: 80px;
	}
}

#menu{
float: right;
width: 109px;
height: 24px;
}

#menu .menu-grid{
display: none;
}

#menu:hover{
width: 344px;
height: 325px;
}

#menu:hover .menu-grid{
display: grid;
grid-template-columns: 155px 155px;
grid-column-gap: 20px;
}

#menu .menu-grid ul{
margin: 0;
padding: 0;
}

#menu .menu-col{
padding: 7px;
}

#menu .menu-grid a{
display: block;
width: 155px;
height: 20px;
margin: 2px 0;
}

#menu .link-text{
position: absolute;
margin: -9999px;
}

#footer-sub-container{
padding-top: 20px;
}

#footer #logo{
width: 234px;
height: 56px;
float: right;
margin: 100px 20px 0 0;
}

#footer #logo a{
width: 234px;
height: 56px;
}

#footer-contents{
width: 55%;
}

@media screen and (max-width: 700px) {
	#footer-contents{
	width: 95%;
	}
	
	#footer #logo{
	float: none;
	width: 400px;
	height: 96px;
	}
	
	#footer #logo a{
	width: 400px;
	height: 96px;
	}
}

@media screen and (max-width: 520px) {
	#footer-contents{
	width: 90%;
	}
	
	#footer #logo{
	float: none;
	width: 300px;
	height: 72px;
	}
	
	#footer #logo a{
	width: 300px;
	height: 72px;
	}
}

#skins button{
padding: 5px;
margin-right: 5px;
}

#footer-nav{
margin-top: 40px;
}

#footer ul{
margin: .5em 0;
padding: 0;
text-align: center;
}

#footer li{
display: inline-block;
margin: 0 5px;
}

/* Cross-site Non-conditional */

h1, h2, h3, h4, h5, h6{
margin: .75em 0;
}

a.asteroid{
padding-right: 20px;
}

a.exit{
padding-right: 20px;
}

.clear-it{
clear: both;
}

.quote{
padding-left: 50px;
margin: 1em 40px; 
}

.spaced-list li{
margin-top: 1em;
margin-bottom: 1em;
}

.margin-list li{
margin-bottom: 1em;
}

.margin-list li li{
margin-bottom: 0;
}

.stub{
padding: 5px;
margin: 1em 40px; 
}

.float-right{
float: right;
padding: 0 0 0 10px;
}

.centered{
text-align: center;
}

/* Insets and Navs */

.inset{
clear: both;
float: right;
margin: 0 -80px 10px 10px;
width: 40%;
padding: 10px;
text-align: left;
}

.inset img{
float: right;
padding-left: 10px;
width: 50%;
}

.inset ul{
padding: 0;
margin-top: 0;
}

.inset li{
margin: 0 0 1em 0;
}

.inset li li{
margin: 0;
}

.screenshots, .stills{
clear: both;
float: left;
margin: 0 20px 0px -80px;
max-width: 450px;
display: grid;
grid-template-columns: 49% 49%;
grid-column-gap: 2%;
}

.screenshots img, .stills img{
width: 100%;
margin-bottom: 5px;
}

@media screen and (max-width: 1140px) {
	.inset{
	margin: 0 -50px 0 10px;
	}

	.screenshots, .stills{
	margin: 0 20px 0 -50px;
	}
}

@media screen and (max-width: 800px) {
	.inset img{
	width: 100%;
	height: auto;
	padding-bottom: 1em;
	}

	.screenshots, .stills{
	width: 50%;
	}
}

.attract{
clear: both;
float: right;
margin: 0 -80px 0 10px;
max-width: 500px;
text-align: center;
}

.attract img{
width: 175px;
}

@media screen and (max-width: 1140px) {
	.attract{
	margin: 0 -50px 0 10px;
	}
}

.fanart{
margin: auto;
margin-bottom: 1em;
text-align: center;
}

#rando{
width: 80%;
margin: auto;
display: grid;
padding: 10px;
grid-template-columns: 49% 49%;
grid-column-gap: 2%;
}

@media screen and (max-width: 800px) {
	#rando{
	grid-template-columns: auto;
	}
}

#rando img{
width: 100%;
}

.tall{
min-height: 180px;
}

.tall img{
width: 200px;
}

.thin{
max-width: 300px;
min-width: 200px;
margin: 0;
}

.index-nav{
padding: 5px;
margin: auto;
margin-bottom: 1em;
clear: both;
width: 80%;
min-width: 300px;
}

.index-nav h5{
padding: 2px;
text-align: center;
margin: 0;
}

.index-nav p{
margin: 3px 0 0 0;
padding: 3px;
}

.index-nav .collapse{
display: none;
}

.index-nav:hover .collapse{
display: block;
}

/* Hover Box Controls */

a.hover-over .hover-box{
display: none;
}

a.hover-over:hover .hover-box{
display: inline-block;
position: absolute;
z-index: 10;
width: 300px;
margin: 1.2em 0 0 -150px;
padding: 10px;
}

a.hover-over .box-banner{
display: block;
height: 100px;
margin-bottom: 5px;
}