/**
 * Parallax Scrolling Tutorial
 * For Smashing Magazine
 * July 2011
 *
 * Author: Richard Shepherd
 *		   www.richardshepherd.com
 * 		   @richardshepherd
 */

@import url('reset.css');

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 18px;
}

article h2 { font-size: 170px; margin: 25px 0; line-height: 1em; }

.story { padding: 0; margin: 0; width: 100%; max-width: 2560px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4);
		 display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center;}

#first { background: url(../images/bg.jpg) 50% 0 fixed; }
#second { background: url(../images/forest.jpg) 50% 0 no-repeat fixed; }
#third { background: url(../images/nuclear.jpg) 50% 0 no-repeat fixed; }
#fourth { background: url(../images/city.jpg) 50% 0 no-repeat fixed; }
#fifth { background: url(../images/organic.jpg) 50% 0 no-repeat fixed; }
#sixth { background: url(../images/used.jpg) 50% 0 no-repeat fixed; }
#theend { background: url(../images/bg.jpg) 50% bottom fixed;}

/* Introduction */
#first_circle { width: 238px; bottom: 0; right: 50%; margin-right: -119px; height: 60px; position: absolute; padding-top: 59px; text-align: center; font-size: 20px; color: #FFF; background: url(../images/half-circle.png) no-repeat center bottom;}


/* Background Only */
#second article,
#third article,
#fourth article,
#fifth article,
#sixth article {color: #fff; margin: 0; padding: 0 0 0; width: 100%; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em;}

/* The End */
#theend_content { text-align: left; position: relative; width: 100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center; -webkit-box-align:center; }
#theend_content p { width: 270px; padding: 20px 0; margin-right: 298px;}
#theend_content h2 { font-size: 100px; }

#half-circle-next { position: absolute; right: 0; top: 50%; margin-top: -119px; width: 79px; height: 198px; padding: 20px; text-align: right; background: url('../images/half-circle-right.png') no-repeat center right;
					display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; }
#half-circle-next a { font-size: 20px; line-height: 23px; color: #FFF; text-decoration: none; }
#half-circle-next a:hover { text-decoration: underline; }