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


article h2 { font-family: 'Ubuntu', sans-serif; font-size: 50px; margin: 25px 0; line-height: 1em; }

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; 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); box-shadow: 0 0 50px rgba(0,0,0,0.8);}

#first { background: url(../images/mainwallpaper1.jpg) 50% 0 no-repeat fixed; }
#second { background: url(../images/wallpaperpuzzle.jpg) 50% 0 no-repeat fixed; }
#fourth { background: url(../images/wallpapercode.png) 50% 0 no-repeat fixed; }
#third { background: url(../images/wallpaperboxes3.jpg) 50% 0 no-repeat fixed; }
#fifth { background: url(../images/wallpaperkey.jpg) 50% 0 no-repeat fixed; }
#sixth { background: url(../images/wallpapersearch.jpg) 50% 0 no-repeat fixed; }
#seventh { background: url(../images/wallpapermaint.jpg) 50% 0 no-repeat fixed; }
#theend { background: url(../images/puckered.png) 50% bottom no-repeat fixed; }

/* Introduction */
#first .dslogo { background: url(../images/dslogo.png) 50% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#first .titlewhy { background: url(../images/steps.png) 50% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#first article { width: 100%; top: 630px; position: absolute; text-align: center; }
#first article p,
#first article a { color: #ccc; }
#first article a { text-decoration: underline; }
#first article a:hover { color: #fff; }
#first #quality {}

/* Background Only */
#second { padding: 0px 0;}
#second article { background: color: #444; width: 600px; height: 550px; margin-left: 50px; padding-top:120px; padding-left: 50px; line-height: 1.5em; font-size:20px;  }
#second article p { margin-bottom: 25px; }
#second article a { color: #0060a4;}
#second .puzzle { background: url(../images/puzzle.png) transparent 40% 300px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%;  position: relative; margin: -671px 0 auto; } 

/* Photograph */
#third article {  background: url(../images/12x12_tratteggio.gif) repeat #444; color: #fff; margin-top:150px; margin-left:48%; margin-right:50px; padding-left: 50px; padding-right: 50px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; font-size:20px; position: absolute; top: 0; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); border: 3px dashed white;}
#third .photograph { background: url(../images/boxes.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#third article p { margin-bottom: 25px; }

/* HTML5 Video */
#fourth article {  background: url(../images/12x12_tratteggio.gif) repeat brown; color: #fff; margin-top:150px; margin-left:48%; margin-right:50px; padding-left: 50px; padding-right: 50px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; font-size:20px; border: 3px dashed yellow; height:auto; }
#fourth article p { margin-bottom: 25px; }

/* DEPLOY */
#fifth { padding: 0px 0;}
#fifth article { background: rgba(255, 255, 255, .5); height: 460px; margin:0 auto; margin-top:210px; padding-top:50px; padding-left: 50px; line-height: 1.5em; font-size:20px; text-align:center;  }
#fifth article p { margin-bottom: 25px; }
#fifth article a { color: #0060a4;}

/* PROMOTE */
#sixth { padding: 0px 0;}
#sixth article { background: url(../images/12x12_tratteggio.gif) repeat #444; color:#fff; height: auto; margin-top:150px; margin-left:48%; margin-right:50px; padding-top:10px; padding-bottom:10px; padding-left: 50px; padding-right: 50px; line-height: 1.5em; font-size:20px;  }
#sixth article p { margin-bottom: 25px; }
#sixth article a { color: #0060a4;}
#sixth .hand { background: url(../images/hand.png) transparent 40% 300px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%;  position: relative; margin: -616px 0 auto; } 

/* MAINTAIN */
#seventh { padding: 0px 0;}
#seventh article { background: rgba(68, 68, 68, .9); color:#fff; height: 460px; margin:0 auto; margin-top:160px; padding-top:50px; padding-left: 50px; padding-right: 50px; line-height: 1.5em; font-size:20px; text-align:center; }
#seventh article p { margin-bottom: 25px; }
#seventh article a { color: #0060a4;}


/* The End */
#theend .byebye { background: url(../images/theend.png) 40% 100px no-repeat fixed; height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }