@charset "utf-8";


#pgBod {
	height: 2500px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	overflow-x: hidden;
	display: none;
}
#waves  {
	z-index: 1;
}


#pgBod #background {
	height: 2500px;
	width: 920px;
	margin-right: auto;
	margin-left: auto;
	z-index: 10;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 0.5em;
	float: left;
}

.opera #pgBod #background #apDiv5 #nav-bg {
	background-image: url(../images/nav-bg.png);
	background-repeat: no-repeat;
	height: 262px;
	width: 82px;
	position: fixed;
	top: 2%;
	left: 20px;
	z-index: 100;
}

#pgBod #background #apDiv5 #nav-bg {
	background-image: url(../images/nav-bg.png);
	background-repeat: no-repeat;
	height: 262px;
	width: 82px;
	position: fixed;
	top: 32%;
	left: 3px;
	z-index: 100;
}





#pgBod #background #wrapper{
	height: 2500px;
	width: 920px;
	margin-right: auto;
	margin-left: auto;
	z-index: 10;
	float: left;
	margin-top: auto;
	margin-bottom: auto;
}
#pgBod #background #wrapper #parallax-cover {
	position: absolute;
	z-index: 101;
	left: 1%;
	top: 25%;
	background-color: #066;
	height: 300px;
	width: 80px;
	
}
#pgBod #background #wrapper #main-wave {
	position: relative;
	left: -540px;
	top: 0px;
	height: 574px;
	width: 2000px;
	z-index: 150;
}
#pgBod #background #wrapper #main-wave2 {
	position: absolute;
	height: 574px;
	width: 2000px;
	top: 2650px;
	z-index: 99;
	left: 0%;
}
#pgBod #background #wrapper #main #parallax-mg5 #mainbuttons_hype_container {
	position: relative;
	left: 250px;
	top: -185px;
}

#pgBod #background #wrapper #home {
	z-index: 10;
	height: 77px;
	width: 920px;
	float: none;
	position: relative;
	top: 0px;
}
#pgBod #apDiv1 {
	position: relative;
	top: 0px;
}

#pgBod #background #wrapper #home #site_title {
	float: left;
	width: 332px;
	height: 77px;
	left: 242px;
	position: relative;
	top: -13px;
}
#pgBod #waves #apDiv4 #parallax-bg1 #aboutme_button {
	top: -390px;
	position: relative;
	z-index: 100;
	height: 74px;
	width: 74px;
	left: 120px;
}

#pgBod #background #wrapper #main {
	height: 300px;
	width: 920px;
	z-index: 350;
	float: left;
	position: relative;
	margin: auto;
}
#pgBod #background #wrapper #main #parallax-mg5 #Stage1 {
	position: absolute;
	top: 100px;
	left: 230px;
}
#pgBod #background #wrapper #main #parallax-mg5 #Stage2 {
	position: absolute;
	top: 230px;
	left: 230px;
}
#pgBod #background #wrapper #main #parallax-mg5 #Stage3 {
	position: absolute;
	left: 230px;
	top: 360px;
}
#pgBod #background #wrapper #showreel #parallax-fg3 a #Stage4 {
	position: absolute;
	top: 1200px;
	left: 150px;
}




#pgBod #background #wrapper #main #FlashID1 {
	z-index: 1;
	position: relative;
	top: 50px;
	left: 288px;
}

#pgBod #background #wrapper #main #FlashID2 {
	z-index: 1;
	position: relative;
	top: 50px;
	left: 283px;
}

#pgBod #background #wrapper #main #FlashID3 {
	position: relative;
	top: 50px;
	left: 280px;

}
#pgBod #background #wrapper #showreel #headerDivImg #apDiv11 {
	z-index: 1;
	height: 360px;
	width: 640px;
}
#pgBod #background #wrapper #main #apDiv9 img {
	margin-left: 0px;
	height: 145px;
	width: 115px;
}
#pgBod #background #wrapper #main #apDiv10 {
	margin-left: 500px;
}
#pgBod #background #wrapper #about {
	height: 450px;
	width: 920px;
	margin-top: 0px;
	float: left;
	
}
#pgBod #background #wrapper #motion {
	height: 900px;
	width: 920px;
	float: left;
	z-index: 10;
	position: relative;
	top: 100px;
	
	
}
#pgBod #background #wrapper #motion #apDiv7 table {
	z-index: 20;
	position: absolute;
	left: -130px;
	top: 1350px;
}
#pgBod #background #apDiv4 img {
	position: absolute;
	left: 10px;
	z-index: 200;
}

#pgBod #background #wrapper #graphics {
	height: 1000px;
	width: 920px;
	margin-top: 0px;
	float: left;
	top: 0px;
	z-index: 10;
	position: relative;
	
}


#pgBod #background #wrapper #graphics #apDiv7 {
	left: 120px;
	z-index: 200;
	top: 2230px;
	position: absolute;
}


#pgBod #background #wrapper #showreel {
	height: 600px;
	width: 920px;
	margin-top: 0px;
	float: left;
	z-index: 54;
	position: relative;
	left: 0px;
	top: 100px;
}
#pgBod #background #wrapper #showreel iframe {
	z-index: 54;
	top: 1000px;
	position: absolute;
	left: -50px;
}
#pgBod #background #wrapper #contact #homebutton4 {
	position: relative;
	top: 800px;
	left: 0px;
}



#pgBod #background #wrapper #contact {
	height: 600px;
	width: 920px;
	margin-top: 0px;
	float: left;
	position: relative;
	z-index: 100;
}
#pgBod #background #wrapper #contact #contact-form {
	position: absolute;
	z-index: 57;
	left: -40px;
	top: 4200px;
	
}

#pgBod #background #wrapper #footer {
	height: 0px;
	width: 920px;
	float: left;
	background-color: #F00;
}


/* Buttons
*****************************************************************/

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});

var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});

.button-main a {
}

.button-main a:link {
}

.button-main a:hover {
}

.button-main a:active {
}

.button-about a {
	width:74px;
	height:74px;
	background-image: url(../images/about-out.png);
	background-repeat:no-repeat;
	float: left;
	background-position: 0px 0px;
	top: 0px;
}

.button-about a:link {
	margin-top:0px
}

.button-about a:hover {
	cursor:pointer;
	width:74px;
	height:74px;
	background-image:url(../images/about-over.png);
}

.button-about a:active {
	width:74px;
	height:74px;

}

.button-contact a {
	width:74px;
	height:74px;
	background-image: url(../images/contact-out.png);
	background-repeat:no-repeat;
	float: left;
	background-position: 0px 0px;
	top: 0px;
}

.button-contact a:link {
	margin-top:0px
}

.button-contact a:hover {
	cursor:pointer;
	background-image: url(../images/contact-over.png);
}

.button-contact a:active {
}



.showreelbutton a {
	background-image: url(../images/showreelbutton.png);
	height: 445px;
	width: 115px;
	top: 70px;
	left: 286px;
	position: absolute;
}

.showreelbutton a:link {
	margin-top:0px
}

.showreelbutton a:hover {
	cursor:pointer;
	width:74px;
	height:74px;
	background-image:url(../images/animated-gif-button.gif);
}

.showreelbutton a:active {
	width:74px;
	height:74px;
	background-image: url(../images/gif-button.gif);
}


.motionbutton a {
	background-image: url(../images/motionbutton.png);
	height: 445px;
	width: 115px;
	top: 70px;
	left: 403px;
	position: absolute;
}

.motionbutton a:link {
	margin-top:0px
}

.motionbutton a:hover {
	cursor:pointer;
	width:74px;
	height:74px;
	background-image:url(../images/animated-gif-button.gif);
}

.motionbutton a:active {
	width:74px;
	height:74px;
	background-image: url(../images/graphicsanimation.gif);
}


.graphicsbutton a {
	display:block;
	background-image: url(../publish/web/edge-animation.html);
	height: 445px;
	width: 115px;
	top: 70px;
	right: 286px;
	position: absolute;
}

.graphicsbutton a:link {
	margin-top:0px
}

.graphicsbutton a:hover {
	cursor:pointer;
	width:115px;
	height:460px;
	background-image:url(../images/graphicsanimation.gif);
}

.graphicsbutton a:active {
	width:74px;
	height:74px;
	background-image: url(../images/gif-button.gif);
}


#apDiv1 {
	position: absolute;
	width: 920px;
	height: 6000px;
	z-index: 1;
	visibility: visible;
	top: -10px;
}
#apDiv2 {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	visibility: hidden;
}
#apDiv3 {
	position: absolute;
	width: 90px;
	height: 1139px;
	z-index: 100;
	left: -5px;
	top: 14px;
}
#apDiv4 {
	position: absolute;
	width: 2px;
	height: 2px;
	z-index: 10;
	top: 400px;
}
#pgBod #parallax-mg1 #apDiv4{
	z-index: 7;
	top: auto;
	position: absolute;
	height: 3000px;
	width: 3px;
	float: left;
}

#apDiv5 {
	position:absolute;
	width:97px;
	height:115px;
	z-index:100;
}

#apDiv6 {
	position:absolute;
	width:920px;
	height:1080px;
	z-index:1;
}
#apDiv7 {
	position:relative;
	width:200px;
	height:115px;
	z-index:10;
	left: 250px;
	top: 50px;
}

#apDiv8 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
}
#apDiv9 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:4;
}
#apDiv10 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:5;
}
#apDiv11 {
	position:absolute;
	width:770px;
	height:480px;
	z-index:4;
}
#apDiv12 {
	position:relative;
	width:71px;
	height:70px;
	z-index:4;
	left: 50px;
}
#apDiv13 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:5;
}
#apDiv14 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:6;
}



/* Nav
*****************************************************************/
nav#primary {
	z-index: 100;
	position: fixed;
	top: 33%;
	left: -12px;
	margin-top: 8px;
	list-style: none;
}
nav#primary li {
	position: relative;
	height: 35px;
	list-style: none;
}

nav#primary a {
	display: block;
	list-style: none;
	width: 30px;
	height: 37px;
	text-indent: -9999px;
	outline:none;
	background: transparent url('../images/nav-dot.png') 5px 5px no-repeat;
}
nav#primary a:hover, nav#primary a.active {
	background: transparent url('../images/nav-dot.png') 3px -35px no-repeat;
	outline:none;
}
nav#primary h1 {
	font-size: 13px;
	height:36px;
	position: absolute;
	left: 43px;
	top: -10px;
	text-align:center;
	display: none;
	padding: 9px 45px 4px 20px;;
	color:#606350;
	white-space: nowrap;
	background: transparent url('../images/nav-arrow.png') 1px 0px no-repeat;
	}	
	
	
	
#pgBod #background #wrapper #parallax-mg4 #mainwave-top {
	background-image: url(../images/mainwave-top.png);
	background-repeat: repeat-x;
	height: 108px;
	width: 1920px;
	left: -500px;
	position: absolute;
	top: 8px;
}
#pgBod #background #wrapper #parallax-mg4 #mainwave-middle {
	background-image: url(../images/mainwave-middle.jpg);
	background-repeat: repeat-x;
	width: 1920px;
	left: -500px;
	top: 116px;
	position: absolute;
	height: 490px;
}
#pgBod #background #wrapper #parallax-mg4 #mainwave-bottom {
	position: absolute;
	height: 103px;
	width: 1920px;
	left: -500px;
	top: 497px;
	background-image: url(../images/mainwave-bottom.png);
	background-repeat: repeat-x;
}
#pgBod #waves #apDiv4 #parallax-bg1 #wave1-middle {
	position: absolute;
	height: 559px;
	width: 1920px;
	top: -120px;
	background-image: url(../images/wave1-middle.jpg);
	background-repeat: repeat-x;
	left: -500px;
}
#pgBod #waves #apDiv4 #parallax-bg1 #wave1-bottom {
	background-image: url(../images/wave1-bottom.png);
	background-repeat: repeat-x;
	position: absolute;
	height: 126px;
	width: 1920px;
	top: 439px;
	left: -500px;
}

#pgBod #waves #apDiv4 #parallax-bg2 #wave2-middle {
	background-image: url(../images/wave2_middle.jpg);
	background-repeat: no-repeat;
	position: absolute;
	height: 714px;
	width: 1920px;
	left: -500px;
	top: -80px;
}
#pgBod #waves #apDiv4 #parallax-bg2 #wave2-bottom {
	position: absolute;
	height: 219px;
	width: 1920px;
	left: -500px;
	top: 634px;
	background-image: url(../images/wave2_bottom.png);
	background-repeat: repeat-x;
}
#pgBod #waves #apDiv4 #parallax-bg6 #wave6-top {
	background-image: url(../images/wave6_top.png);
	background-repeat: repeat-x;
	position: absolute;
	width: 1920px;
	height: 239px;
	top: 1902px;
	left: 0px;
}
#pgBod #waves #apDiv4 #parallax-bg6 #wave6-bottom {
	background-repeat: repeatx;
	background-image: url(../images/wave6_middle.jpg);
	left: 0px;
	position: absolute;
	top: 2140px;
	width: 1920px;
	height: 442px;
}
#pgBod #background #wrapper #parallax-bg7 #contact-wave-top {
	width: 1920px;
	top: 3344px;
	background-image: url(../images/contact_top.png);
	background-repeat: repeat-x;
	height: 226px;
	position: absolute;
	left: -500px;
}
#pgBod #background #wrapper #parallax-bg7 #contact-wave-bottom {
	position: absolute;
	width: 1920px;
	background-image: url(../images/contact_middle.jpg);
	background-repeat: repeat-x;
	height: 609px;
	left: -500px;
	top: 3485px;
}
#pgBod #background #wrapper #motion #parallax-fg1 #apDiv7 table tr td a #lighthouse {
}