/* 
* Styles relevant for this demo 
*/

#content {
	max-width: 40em; 
	margin: 0 auto; 
	padding-top:2%;
	text-shadow:0 1px 0 #fdfdfd;
}

.inner {
	padding:0 4%;
}

#footer {
	clear:both;
	overflow:hidden;
}

#footer .inner {
}

/* 
* Footer left content 
*/
#footer  #copyright-and-such {
	float:left;
	color:#aaa;
	text-shadow:-1px -1px #111;
	letter-spacing:1px;
}

/* 
* Scroll top link inside footer, 
* but fixed relative to viewport
*/
#footer #scroll-top {
	position:fixed; 
	/* On top of everything */
	z-index:9999; 
	bottom:0;
	right:0;
	margin:0.9em;
	display:inline-block;
	padding:0.15em 0.5em;
	border-radius:3px;
	color:#fafafa;
	text-decoration:none;
	border:1px solid transparent;
	background:#d0112b;
	letter-spacing:1px;
	text-transform:uppercase;
}

/* 
* Up Arrow for the scroll top link 
*/
#footer #scroll-top:after {
	content:"";
	display:inline-block;
	vertical-align:middle;
	margin-left:0.35em;
	width: 0;
	height: 0;
	border-left: 0.3em solid transparent;
	border-right:  0.3em solid transparent;
	border-bottom:  0.3em solid #fefefe;
}


/* 
* When the viewport is 55em 
* (15em wider than the 40em 
* max-width for #content ) 
* it gets a static postion to not 
* overlap the content area 
*/
@media screen and (max-width: 55em) {
	#footer #scroll-top {
		float:right;
		position:static;
		margin:0;
	}
}