/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/


/* Global reset
   http://meyerweb.com/eric/tools/css/reset/ 
*****************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	color: #3C3; /* text color */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Extended base styles (site specific)
*****************************************************************/

html { 
	overflow-y: scroll; /* always force a scrollbar in non-IE */
	}
body {
	xx#b8e0ff
	overflow-x: hidden;
	height: 38150px;
	line-height: 1.5;
	color: #000;
	font-size: 14px;
	font-family: Arial,sans-serif;
	xxbackground-color: #0F0;
	xxbackground-image: url(../img/background.jpg);
	xxbackground-repeat: repeat-x;
	
	height: 39150px;
	background: #040614; /* Old browsers */
background: -moz-linear-gradient(top,  #040614 0%, #040614 16%, #19387f 32%, #2e1c96 46%, #4d59a0 60%, #4d59a0 60%, #2c39ea 63%, #207cca 70%, #207cca 77%, #c96226 87%, #f42ea8 89%, #f9d42f 94%, #f9d42f 96%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#040614), color-stop(16%,#040614), color-stop(32%,#19387f), color-stop(46%,#2e1c96), color-stop(60%,#4d59a0), color-stop(60%,#4d59a0), color-stop(63%,#2c39ea), color-stop(70%,#207cca), color-stop(77%,#207cca), color-stop(87%,#c96226), color-stop(89%,#f42ea8), color-stop(94%,#f9d42f), color-stop(96%,#f9d42f), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #040614 0%,#040614 16%,#19387f 32%,#2e1c96 46%,#4d59a0 60%,#4d59a0 60%,#2c39ea 63%,#207cca 70%,#207cca 77%,#c96226 87%,#f42ea8 89%,#f9d42f 94%,#f9d42f 96%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #040614 0%,#040614 16%,#19387f 32%,#2e1c96 46%,#4d59a0 60%,#4d59a0 60%,#2c39ea 63%,#207cca 70%,#207cca 77%,#c96226 87%,#f42ea8 89%,#f9d42f 94%,#f9d42f 96%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #040614 0%,#040614 16%,#19387f 32%,#2e1c96 46%,#4d59a0 60%,#4d59a0 60%,#2c39ea 63%,#207cca 70%,#207cca 77%,#c96226 87%,#f42ea8 89%,#f9d42f 94%,#f9d42f 96%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #040614 0%,#040614 16%,#19387f 32%,#2e1c96 46%,#4d59a0 60%,#4d59a0 60%,#2c39ea 63%,#207cca 70%,#207cca 77%,#c96226 87%,#f42ea8 89%,#f9d42f 94%,#f9d42f 96%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040614', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
h1 {
	color: #649cc8; /* page # color */
}
a, a:link,
a:active,
a:visited {
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	color:#649cc8;
	outline: none;
	text-decoration:none;
	}
	a:hover { 
		color:#000;
		}
img { 
	display:block;
	}
p {
	margin:1em 0;
	}

/* Common shared styles
*****************************************************************/

hr {
	margin: 0;
	border: none;
	border-top: 1px solid #3b3b3b;
	border-bottom: 1px solid #3b3b3b;
	height: 3px;
}

/* Page structure
*****************************************************************/

#wrapper {
	position: relative;
}
#branding {
	width: 100%;
	background: #fff;
	}
	#branding h1 {
		width: 940px;
		padding: 10px 15px;
		margin: 0 auto;
		text-transform: uppercase;
		font-size: 18px;
		font-weight: bold;
		}

/* Nav
*****************************************************************/

nav#primary {
	z-index: 5;
	position: fixed;
	top: 20%;
	right: 16px;
	margin-top: -40px;
}
nav#primary li {
	position: relative;
	height: 20px;
}
nav#primary a {
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: transparent url('../img/nav-dot.png') 4px 4px no-repeat;
}
nav#primary a:hover, nav#primary a.active {
	background: transparent url('../img/nav-dot.png') 4px -16px no-repeat;
}
nav#primary h1 {
	position: absolute;
	right: 22px;
	top: -7px;
	display: none;
	padding: 4px 20px 4px 7px;;
	color: #fff;
	white-space: nowrap;
	background: transparent url('../img/nav-arrow.png') 100% 50% no-repeat;
	}
nav.next-prev {
	margin: 20px 0 0 0;
	}
	a.prev,
	a.next {
		display: block;
		width: 15px;
		height: 11px;
		text-indent: -9999px;
		}
	a.prev {
		margin: 0 auto 5px auto;
		background: transparent url('../img/scroll-arrow-up.png') 0 0 no-repeat;
		}
		a.prev:hover {
			background: transparent url('../img/scroll-arrow-up.png') 0 -11px no-repeat;
			}
	a.next {
		margin: 5px auto 0 auto;
		background: transparent url('../img/scroll-arrow-down.png') -1px 0 no-repeat;
		}
		a.next:hover {
			background: transparent url('../img/scroll-arrow-down.png') -1px -11px no-repeat;
			}

/* Parallax
*****************************************************************/

/* content */
#content {
	z-index: 5;
	position: relative;
	max-width: 940px;
	padding: 0 10px;
	margin: 0 auto;
	line-height: 1.7;
	xxbackground-image: url(img/bigz_bg.jpg);
	}
	#content article {
		width: 300px;
		}
		#page-number-1 ,
		#page-number-2,
		#page-number-3,
		#page-number-4,
		#page-number-5,
		#page-number-6,
		#page-number-7,
		#page-number-8,
		#page-number-9,
		#page-number-10,
		#page-number-11,
		#page-number-12,
		#page-number-13,
		#page-number-14,
		#page-number-15,
		#page-number-16,
		#page-number-17,
		#page-number-18,
		#page-number-19,
		#page-number-20,
		#page-number-21,
		#page-number-22,
		#page-number-23,
		#page-number-24,
		#page-number-25,
		#page-number-26,
		#page-number-27,
		#page-number-28,
		#page-number-29,
		#page-number-30,
		#page-number-31,
		#page-number-32,
		#page-number-33,
		#page-number-34,
		#page-number-35,
		#page-number-36 {
			padding-top: 105px;
			}
		#page-number-1 {
			position: absolute;
			top: 0px;
			}
		#page-number-2 {
			position: absolute;
			top: 1090px;
			}
		#page-number-3 {
			position: absolute;
			top: 2180px;
			}
			#content h1 {
				margin: 0 0 25px 0;
				font-size: 60px;
				font-family: Georgia, serif;
				font-weight: normal;
				line-height: 65px;
				}
		#page-number-4 {
			position: absolute;
			top: 3270px;
			}
		#page-number-5 {
			position: absolute;
			top: 4360px;
			}
		#page-number-6 {
			position: absolute;
			top: 5450px;
			}
		#page-number-7 {
			position: absolute;
			top: 6540px;
			}
		#page-number-8 {
			position: absolute;
			top: 7630px;
			}
		#page-number-9 {
			position: absolute;
			top: 8720px;
			}
		#page-number-10 {
			position: absolute;
			top: 9810px;
			}
		#page-number-11 {
			position: absolute;
			top: 10900px;
			}	
		#page-number-12 {
			position: absolute;
			top: 11990px;
			}	
		#page-number-13 {
			position: absolute;
			top: 13080px;
			}	
		#page-number-14 {
			position: absolute;
			top: 14170px;
			}	
		#page-number-15 {
			position: absolute;
			top: 15260px;
			}	
		#page-number-16 {
			position: absolute;
			top: 16350px;
			}	
		#page-number-17 {
			position: absolute;
			top: 17440px;
			}
		#page-number-18 {
			position: absolute;
			top: 18530px;
			}	
		#page-number-19 {
			position: absolute;
			top: 19620px;
			}	
		#page-number-20 {
			position: absolute;
			top: 20710px;
			}
		#page-number-21 {
			position: absolute;
			top: 21800px;
			}	
		#page-number-22 {
			position: absolute;
			top: 22890px;
			}	
		#page-number-23 {
			position: absolute;
			top: 23980px;
			}	
		#page-number-24 {
			position: absolute;
			top: 25070px;
			}	
		#page-number-25 {
			position: absolute;
			top: 26160px;
			}	
		#page-number-26 {
			position: absolute;
			top: 27250px;
			}	
		#page-number-27 {
			position: absolute;
			top: 28340px;
			}
		#page-number-28 {
			position: absolute;
			top: 29430px;
			}	
		#page-number-29 {
			position: absolute;
			top: 30520px;
			}
		#page-number-30 {
			position: absolute;
			top: 31610px;
			}		
		#page-number-31 {
			position: absolute;
			top: 32700px;
			}		
		#page-number-32 {
			position: absolute;
			top: 33790px;
			}		
		#page-number-33 {
			position: absolute;
			top: 34880px;
			}		
		#page-number-34 {
			position: absolute;
			top: 35970px;
			}		
		#page-number-35 {
			position: absolute;
			top: 37060px;
			}		
		#page-number-36 {
			position: absolute;
			top: 38150px;
			}												
			
				
/* foreground */
#parallax-bg3 {
	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 940px;
	margin-left: -470px; /* move left by half element's width */
	}
	/* foreground images */
	#fg3-1 {              /* big zzz */
		position: absolute; 
		top: 7340px;
		left: 30px;
		}
	#fg3-2 {        /* created by text */
		position: absolute;
		top: 6650px;
		left: 10px;
		}
	#fg3-3 {               /* mcdreemy */
		position: absolute;
		top: 8100px;
		left: 450px;
		}
	#fg3-4 {             /* rem */
		position: absolute;
		top: 9130px;
		left: 300px;
		}
	#fg3-5 {           /* lulabye */
		position: absolute;
		top: 11500px;
		left: 600px;
		}
	#fg3-6 {           /* 2015 */
		position: absolute;
		top: 50px;
		left: 70px;
		}
	#fg3-7 {         /* catnap */
		position: absolute;
		top: 20500px;
		left: -150px;
		}
	#fg3-8 {         /* comic wizard guy */
		position: absolute;
		top: 18350px;
		left: 500px;
		}
	#fg3-9 {         /* the motto */
		position: absolute;
		top: 26000px;
		left: -200px;
		}
	#fg3-10 {         /* word balloons call dreem team */
		position: absolute;
		top: 23100px;
		left: -140px;
		}
	#fg3-11 {         /* word balloons sleep tight */
		position: absolute;
		top: 20000px;
		left: 870px;
		}
	#fg3-12 {         /* name tag rem */
		position: absolute;
		top: 9430px;
		left: 525px;
		}
	#fg3-13 {           /* cloudy */
		position: absolute;
		top: 25500px;
		left: 475px;
		}
	#fg3-14 {         /* word balloons */
		position: absolute;
		top: 3800px;
		left: 200px;
	    }
	#fg3-15 {         /* word balloons bomb */
		position: absolute;
		top: 10000px;
		left: 770px;
	    }
	#fg3-16 {         /* lulabye 2 */
		position: absolute;
		top: 13120px;
		left: 610px;
	    }
	#fg3-17 {         /* blacksheep comic */
		position: absolute;
		top: 23700px;
		left: -220px;
	    }
	#fg3-18 {         /* thriller comic */
		position: absolute;
		top: 21300px;
		left: 40px;
	    }
	#fg3-19 {         /* bed bug beatdown */
		position: absolute;
		top: 26700px;
		left: -130px;
	    }
	#fg3-20 {         /* dream machine ship */
		position: absolute;
		top: 15300px;
		left: -370px;
	    }
	#fg3-21 {         /* team pose */
		position: absolute;
		top: 28960px;
		left: -80px;
	    }
	#fg3-22 {         /* kids ent rocks button */
		position: absolute;
		top: 900px;
		left: 640px;
	    }
		
		
/* midground images */
#parallax-bg2 {
	z-index: 2;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#mg2-1 {          /* clouds 3 */
		position: absolute;
		top: 7862px;
		left: 200px;
		}
	#mg2-2 {            /* clouds 3 */
		position: absolute;
		top: 2400px;
		left: 650px;
		}
	#mg2-3 {            /* clouds 3 */
		position: absolute;
		top: 743px;
		left: -35px;
		}
	#mg2-4 {           /* clouds 3 */
		position: absolute;
		top: 15780px;
		left: 250px;
		}
	#mg2-5 {           /* dream catcher 1 */
		position: absolute;
		top: 1400px;
		left: 890px;
		}
	#mg2-6 {           /* clouds 3 */
		position: absolute;
		top: 5370px;
		left: -110px;
		}
	#mg2-7 {          /* clouds 3 */
		position: absolute;
		top: 17700px;
		left: 200px;
		}
	#mg2-8 {         /* boogiee monster text */
		position: absolute;
		top: 10700px;
		left: 210px;
		}
	#mg2-9 {        /* scroll down guy */
		position: absolute;
		top: 310px;
		left: 980px;
		}
	#mg2-10 {       /* big z super hero sheep postcard */
		position: absolute;
		top: 3400px;
		left: 100px;
		}
	#mg2-11 {         /* word balloons i cant sleep */
		position: absolute;
		top: 1300px;
		left: 45;
		}
	#mg2-12 {         /* second comic */
		position: absolute;
		top: 6150px;
		left: -40px;
		}
	#mg2-13 {         /* dream catcher 2 */
		position: absolute;
		top: 3000px;
		left: 14;
		}
	#mg2-14 {         /* word balloons 2 */
		position: absolute;
		top: 9999px;
		left: 700px;
		}
	#mg2-15 {         /* kids ent logo */
		position: absolute;
		top: 280px;
		left: 80px;
		}
	#mg2-16 {         /* name tag mcdreamy */
		position: absolute;
		top: 5900px;
		left: 90px;
		}
	#mg2-17 {         /* baddies */
		position: absolute;
		top: 16680px;
		left: -125px;
		}
	#mg2-18 {         /* name tag lulabye */
		position: absolute;
		top: 9200px;
		left: 180px;
		}
	#mg2-19 {         /* name tag catnap */
		position: absolute;
		top: 13810px;
		left: 700px;
		}
	#mg2-20 {         /* name tag big z */
		position: absolute;
		top: 5100px;
		left: 740px;
		}
	#mg2-21 {         /* name tag cloudy */
		position: absolute;
		top: 17280px;
		left: 125px;
		}
	#mg2-22 {         /* snooze week */
		position: absolute;
		top: 12650px;
		left: -120px;
		}
	#mg2-23 {         /* black sheep newspaper */
		position: absolute;
		top: 11550px;
		left: 100px;
		}
	#mg2-24 {         /* houses */
		position: absolute;
		top: 19800px;
		left: -250px;
		}
	#mg2-25 {         /* letter email */
		position: absolute;
		top: 18500px;
		left: -50px;
		}
		
		
/* background images */
#parallax-bg1 {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#bg1-1 {
		position: absolute;
		top: 85px;
		left: -270px;
		}
	#bg1-2 {
		position: absolute;
		top: 440px;
		left: 795px;
		}
	#bg1-3 {     /* main comic */
		position: absolute;
		top: 800px;
		left: 200px;
		}
	#bg1-4 {      /* capnap cloudy */
		position: absolute;
		top: 9100px;
		left: 650px;
		}
	#bg1-5 {
		position: absolute;
		top: 1440px;
		left: 220px;
		}
	#bg1-6 {         /* boogie monster */
		position: absolute;
		top: 4600px;
		left: -250px;
		}
	#bg1-7 {         /* sheeple cover */
		position: absolute;
		top: 3700px;
		left: -60px;
		}
	#bg1-8 {         /* burning building comic */
		position: absolute;
		top: 7600px;
		left: 300px;
		}
	#bg1-9 {         /* city */
		position: absolute;
		top: 9390px;
		left: -400px;
		}
		
/* topground images */
#parallax-bg4 {
	z-index: 4;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#tg1-1 {          /* blue cloud */
		position: absolute;
		top: 2000px;
		left: 840px;
		}
	#tg1-2 {          /* blue cloud - bottom of page */
		position: absolute;
		top: 13130px;
		left: 900px;
		}
	#tg1-3 {          /* dream catcher big */
		position: absolute;
		top: 1750px;
		left: -50px;
		}
	#tg1-4 {          /* dream catcher small */
		position: absolute;
		top: 3000px;
		left: 200px;
		}
	#tg1-5 {          /* dream catcher big */
		position: absolute;
		top: 4500px;
		left: 550px;
		}
	#tg1-6 {          /* dream catcher small */
		position: absolute;
		top: 7200px;
		left: 40px;
		}
	#tg1-7 {          /* dream catcher big */
		position: absolute;
		top: 9900px;
		left: 580px;
		}
	#tg1-8 {          /* dream catcher small */
		position: absolute;
		top: 12000px;
		left: 75px;
		}
	#tg1-9 {          /* dream catcher big */
		position: absolute;
		top: 74570px;
		left: 290px;
		}
	#tg1-10 {          /* dream catcher small */
		position: absolute;
		top: 8080px;
		left: -10px;
		}
	#tg1-11 {          /* sheep fighter */
		position: absolute;
		top: 5500px;
		left: 900px;
		}
	#tg1-12 {          /* 3d glasses */
		position: absolute;
		top: 8300px;
		left: 375px;
		}
	#tg1-13 {          /* big zzs sheep thrills */
		position: absolute;
		top: 11700px;
		left: 900px;
		}
	#tg1-14 {          /* big zzs sheep thrills artwork */
		position: absolute;
		top: 850px;
		left: 980px;
		}
	#tg1-15 {          /* logo bottom */
		position: absolute;
		top: 13360px;
		left: 555px;
		}
	#tg1-16 {          /* word balloons zzzzz */
		position: absolute;
		top: 3400px;
		left: 100px;
		}
	#tg1-17 {          /* word balloons deep sheep */
		position: absolute;
		top: 10500px;
		left: 1090px;
		}
	#tg1-18 {          /* word balloons no monsters */
		position: absolute;
		top: 12750px;
		left: 1090px;
		}
	#tg1-19 {          /* word balloons snooze button */
		position: absolute;
		top: 1460px;
		left: -75px;
		}

		
#my_nav {
	position: fixed;
	float: left;
	height: 800px;
	width: 125px;
	z-index: 99;
}
#nav_box01 {
	float: left;
	height: 103px;
	width: 125px;
}
#nav_box02 {
	float: left;
	height: 125px;
	width: 125px;
}
#nav_box03 {
	float: left;
	height: 117px;
	width: 125px;
}
#nav_box04 {
	float: left;
	height: 101px;
	width: 125px;
}
#nav_box05 {
	float: left;
	height: 95px;
	width: 125px;
}
#nav_box06 {
	float: left;
	height: 90px;
	width: 125px;
}
#nav_box07 {
	float: left;
	height: 86px;
	width: 125px;
}
#nav_box08 {
	float: left;
	height: 95px;
	width: 125px;
}
#nav_box09 {
	float: left;
	height: 86px;
	width: 125px;
}