@charset "utf-8";
/* CSS Document */
@import url('reset.css');
/* basic elements */
html, body {margin: 0;padding: 0;}
body 
{ 
	font: 11pt georgia, sans-serif;
	line-height:normal;
	color: #666666; 
	background-color:#0088ff;
	background:url(../img/oceanside.jpg) top center no-repeat;
	background-size:cover;
	text-align:justify;
	overflow-x:hidden;
}
@font-face {
font-family: 'SnigletRegular';
src: url('../fonts/Vanilla-webfont.eot');
src: url('../fonts/Vanilla-webfont.eot?#iefix') format('embedded-opentype'),
	 url('../fonts/Vanilla-webfont.woff') format('woff'),
	 url('../fonts/Vanilla-webfont.ttf') format('truetype'),
	 url('../fonts/Vanilla-webfont.svg#SnigletRegular') format('svg');
font-weight: normal;
font-style: normal;
font-size:700%;
}
p {margin-bottom:10px;}
h1, h2, h3 {font-family: 'SnigletRegular';}
	h1, h2{width:100%;}
		h1{font-size:400%; text-shadow:0 3px 15px #999; margin-top:35px;}
		h2{font-size:125%; text-indent:425px; margin:20px 0 30px 0;}
		h3{font-size:150%; margin:15px 0 ;}
	
a{color:#2FA0FD;text-decoration:none;}
	a:hover, a:active 
	{ 
		color:#666;
		text-decoration:none;
		border-bottom:1px dotted #666;
	} 

/*
 * specific divs
 */

#container { 
width:960px;
margin: 0 auto;
background:rgba(255, 255, 255, 0.4);
padding:10px;
height:1550px;
z-index:9999px;
position:relative;
}
	
	#intro 
	{ 
		
	}
		#pageHeader {width:100%; height:150px;}
		

#quickSummary {

	}
#quickSummary p {

	}

#preamble {
	
	}
#supportingText {	
	width:690px;
	float:left;
	padding-right:10px;
	}

#footer { 
	width:100%;
	}
	#footer a{float:left; width:131px; text-indent:2px; text-align:center;}
	
#footer a:link, #footer a:visited { 
 
	}


#linkList2 {
	width:250px;
	float:left;
	}
		#linkList2  ul li
		{ 
			list-style:circle;
			margin-left:40px;
		}












#linkList ul {

	}
#linkList li {

	}
#linkList li a:link {

	}
#linkList li a:visited {

	}


#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
	background-image:url(../img/clouds.png);
	width:375px;
	height:153px;
	display:block;
	z-index:9000;
	postion:absolute;
	opacity:0.5;
	}
	
	/*http://www.fuellert.ca/blog/?p=48*/
	
	#extraDiv1{
		float:left;
		margin-left:-650px;
		margin-top:-45%;
		transition-property: transform;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		-ms-transition-property: -ms-transform;
		-o-transition-property: -o-transform;
		animation-name: cloud1;
		animation-duration: 10s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		-webkit-animation-name: cloud1;
		-webkit-animation-duration: 10s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-moz-animation-name: cloud1;
		-moz-animation-duration: 10s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
		-ms-animation-name: cloud1;
		-ms-animation-duration: 10s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-timing-function: linear;
		-o-animation-name: cloud1;
		-o-animation-duration: 10s;
		-o-animation-iteration-count: infinite;
		-o-animation-timing-function: linear;
		}
		@keyframes cloud1 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud1 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(600%);}
		}
		@-moz-keyframes cloud1 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(600%);}
		}
		@-o-keyframes cloud1 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(600%);}
		}

		#extraDiv2{
			float:left;
			margin-left:-375px;
			margin-top:-60%;
			transition-property: transform;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			-ms-transition-property: -ms-transform;
			-o-transition-property: -o-transform;
			animation-name: cloud2;
			animation-duration: 30s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			-webkit-animation-name: cloud2;
			-webkit-animation-duration: 30s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-moz-animation-name: cloud2;
			-moz-animation-duration: 30s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-ms-animation-name: cloud2;
			-ms-animation-duration: 30s;
			-ms-animation-iteration-count: infinite;
			-ms-animation-timing-function: linear;
			-o-animation-name: cloud2;
			-o-animation-duration: 30s;
			-o-animation-iteration-count: infinite;
			-o-animation-timing-function: linear;
		}
		@keyframes cloud2 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud2 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(600%);}
		}
		@-moz-keyframes cloud2 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(600%);}
		}
		@-o-keyframes cloud2 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(600%);}
		}
		
		#extraDiv3{
			float:left;
			margin-left:-520px;
			margin-top:-35%;
			transition-property: transform;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			-ms-transition-property: -ms-transform;
			-o-transition-property: -o-transform;
			animation-name: cloud3;
			animation-duration: 15s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			-webkit-animation-name: cloud3;
			-webkit-animation-duration: 15s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-moz-animation-name: cloud3;
			-moz-animation-duration: 15s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-ms-animation-name: cloud3;
			-ms-animation-duration: 15s;
			-ms-animation-iteration-count: infinite;
			-ms-animation-timing-function: linear;
			-o-animation-name: cloud3;
			-o-animation-duration: 15s;
			-o-animation-iteration-count: infinite;
			-o-animation-timing-function: linear;
		}
		@keyframes cloud3 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud3 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(600%);}
		}
		@-moz-keyframes cloud3 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(600%);}
		}
		@-o-keyframes cloud3 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(600%);}
		}
		
		#extraDiv4{
			float:left;
			margin-left:-475px;
			margin-top:-90%;
			transition-property: transform;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			-ms-transition-property: -ms-transform;
			-o-transition-property: -o-transform;
			animation-name: cloud4;
			animation-duration: 37.5s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			-webkit-animation-name: cloud4;
			-webkit-animation-duration: 37.5s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-moz-animation-name: cloud4;
			-moz-animation-duration: 37.5s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-ms-animation-name: cloud4;
			-ms-animation-duration: 37.5s;
			-ms-animation-iteration-count: infinite;
			-ms-animation-timing-function: linear;
			-o-animation-name: cloud4;
			-o-animation-duration: 37.5s;
			-o-animation-iteration-count: infinite;
			-o-animation-timing-function: linear;
		}
		@keyframes cloud4 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud4 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(600%);}
		}
		@-moz-keyframes cloud4 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(600%);}
		}
		@-o-keyframes cloud4 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(600%);}
		}
		
		#extraDiv5{
			float:left;
			margin-left:-375px;
			margin-top:-20%;
			transition-property: transform;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			-ms-transition-property: -ms-transform;
			-o-transition-property: -o-transform;
			animation-name: cloud5;
			animation-duration: 13s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			-webkit-animation-name: cloud5;
			-webkit-animation-duration: 13s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-moz-animation-name: cloud5;
			-moz-animation-duration: 13s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-ms-animation-name: cloud5;
			-ms-animation-duration: 13s;
			-ms-animation-iteration-count: infinite;
			-ms-animation-timing-function: linear;
			-o-animation-name: cloud5;
			-o-animation-duration: 13s;
			-o-animation-iteration-count: infinite;
			-o-animation-timing-function: linear;
		}
		@keyframes cloud5 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud5 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(600%);}
		}
		@-moz-keyframes cloud5 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(600%);}
		}
		@-o-keyframes cloud5 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(600%);}
		}
		
		#extraDiv6{
			float:left;
			margin-left:-600px;
			margin-top:-10%;
			transition-property: transform;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			-ms-transition-property: -ms-transform;
			-o-transition-property: -o-transform;
			animation-name: cloud6;
			animation-duration: 24s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			-webkit-animation-name: cloud5;
			-webkit-animation-duration: 24s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-moz-animation-name: cloud6;
			-moz-animation-duration: 24s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-ms-animation-name: cloud6;
			-ms-animation-duration: 24s;
			-ms-animation-iteration-count: infinite;
			-ms-animation-timing-function: linear;
			-o-animation-name: cloud6;
			-o-animation-duration: 24s;
			-o-animation-iteration-count: infinite;
			-o-animation-timing-function: linear;
		}
		@keyframes cloud6 
		{
			from {transform: translateX(0%);}
			to {transform: translateX(100%);}
		}		
		@-webkit-keyframes cloud6 
		{
			from {-webkit-transform: translateX(0%);}
			to {-webkit-transform: translateX(650%);}
		}
		@-moz-keyframes cloud6 
		{
			from {-moz-transform: translateX(0%);}
			to {-moz-transform: translateX(650%);}
		}
		@-o-keyframes cloud6 
		{
			from {-o-transform: translateX(0%);}
			to {-o-transform: translateX(650%);}
		}

	
	
	
