@charset "UTF-8";

/* CLEAR TO START */
	
	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, font, 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 {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}


/* -{GLOBAL STYLES}- */		
		
	body {
		background: #000;
		font-family: Helvetica, Arial, sans-serif;
	}
	
	p, h1, h2, h3, h4, h5, h6, li {
		color: #FFF;
		margin: 0;
		font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	}
	
	p {
		font-size: 11pt;
		letter-spacing: 2.3px;
	}
	
	h2 {
		font-size: 16px;
		margin-left: 10px;
		margin-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
		letter-spacing: 2.3px;
	}
	
	#containerDiv {
		width: 800px;
		margin: 0 auto;
		background: #000 url(images/bigShip2.png) no-repeat;
	}
	
	.embold {
		color: #FFF;
		font-weight: bold;
		letter-spacing: 2.3px;
	}
	
	.highlight {
		color: #FFF;
		font-weight: bold;
		letter-spacing: 2px;
		font-size: 13px;
	}
	
	.highlight:hover {
		color: #0C0;
	}
	
	.link {
		color: #FFF;
		font-weight: bold;
		letter-spacing: 2px;
		font-size: 16px;
	}
	
	.link:hover {
		color: #0C0;
	}
	
	.bodyText {
		font-size: 11px;
		margin-left: 10px;
		letter-spacing: 1px;
		line-height: 30px;
	}
	
	.fullSize {
		display: block;
		height: 600px;
		width: 900px;
		padding: 0 0;
	}

	
		/* >>> header <<< */		
			
		#header {
		height: 350px;
		position: relative;
		margin-top: 45px;
		}

		/* >>> main menu <<< */		
			
		#mainMenu { 
		position: absolute;
		width: 900px;
		left: 0px;
		bottom: -260px;
		}
		
		#mainMenu ul {
			list-style: none;
		}
		
		#mainMenu li {
			float: left;
			margin-right: 80px;
		}
		
		#about {
			display: block;
			height: 200px;
			width: 200px;
			background: url(images/hootsSprite.png) 0px 0px;
			border: none;
		}
		
		#about:hover {
			background-position: -0px -200px;
		}
		
		#about:active {
			background-position: -0px -400px;
		}
		
		#aboutCurrent {
			display: block;
			height: 200px;
			width: 200px;
			background: url(images/hootsSprite.png) 0px;
			border: none;
		}
		
		#projects {
			display: block;
			height: 200px;
			width: 200px;
			background: url(images/dunDidSprite.png) 0px 0px;
			border: none;
		}
		
		#projects:hover {
			background-position: -0px -200px;
		}
		
		#projects:active {
			background-position: -0px -400px;
		}
		
		#projectsCurrent {
			display: block;
			height: 200px;
			width: 200px;
			background: url(images/dunDidSprite.png) 0px -200px;
			border: none;
		}
		
		#blog {
			display: block;
			height: 200px;
			width: 200px;
			background: url(images/invmansprite.png) 0px 0px;
			border: none;
		}
		
		#blog:hover {
			background-position: 0px -200px;
		}
		
		#blog:active {
			background-position: 0px -400px;
		}

/* -{ BUTTON STYLINGS }- */

	/* >>> contact button <<< */	
		
		#contact {
			position: absolute;
			left: 590px;
			top: 0px;
		}
		
		#contact a {
			width: 125px;
			height: 80px;
			display: block;
			background: url(images/contactsprite.png) 0px 0px;
			border: none;
		}
		
		#contact a:hover {
			background-position: 0px -80px;
		}
		
		#contact a:active {
			background-position: 0px -160px;
		}

	/* >>> home button <<< */
		
		#homeButton {
			position: fixed;
			bottom: 0px;
			left: 10px;
		}
		
		#homeButton a {
			width: 170px;
			height: 225px;
			display: block;
			background: url(images/homeSprite.png) 0px 0px;
			border: none;
		}
		
		#homeButton a:hover {
			background-position: -0px -225px;
		}
		
		#homeButton a:active {
			background-position: -0px -450px;
		}

	/* >>> one stroke button <<< */
	
					
			#oneStroke {
				position: fixed;
				bottom: 30px;
				right: 30px;
			}
			
			#oneStroke a {
				width: 145px;
				height: 79px;
				display: block;
				background: url(images/oneStrokeSprite.png) 0px 0px;
				border: none;
			}
			
			#oneStroke a:hover {
				background-position: -0px -79px;
			}

/* -{ SPECIFIC PAGE STYLINGS}- */
	
	/* >>> theHoot <<< */			
	
		#theHoot {
			position: absolute;
			left: 60px;
			top: 40px;
			width: 680px;
		}
		
		#theHoot p {
			font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
			color: #666;
			line-height: 18px;
			padding-bottom: 1.5em;
		}
		
		
		#theHoot a {
			text-decoration: none;
		}
		
		a:hover {
			color: #0C0;
		}
	
	/* >>> two Young Gentlemen <<< */
	
		#greenBox {
		width: 220px;
		height: 37px;
		background: #0C0;
		position: absolute;
		left: 232px;
		top: -10px;
		z-index: 1;
	}
	
	#greenBox p {
		color: white;
		margin: 0;
		padding: 10px 10px;
		font-weight: bold;
	}
	
	#headyBground {
		position: absolute;
		left: -43px;
		top: -100px;
		width: 850px;
		height: 850px;
		background-image:url(images/headyBground.png);
	}
	
	#mattInfo {
		position: absolute;
		top: 525px;
		left: 70px;
		width: 250px;
		height: 80px;
		text-align: right;
	}
	
	#mattInfo h1 {
		margin: 0;
		padding: 0;
		font-size: 22px;
		color: #0C0;
		letter-spacing: 2px;
		padding-bottom: 2px;
	}
	
	#mattInfo a {
		text-decoration: none;
	}
	
	#ericInfo {
		position: absolute;
		top: 100px;
		left: 540px;
		width: 250px;
		height: 80px;
		text-align: right;
	}
	
	#ericInfo h1 {
		margin: 0;
		padding: 0;
		font-size: 22px;
		color: #0C0;
		letter-spacing: 2px;
		padding-bottom: 2px;
	}
	
	#ericInfo a {
		text-decoration: none;
	
	}

	/* >>> What's Dun Did? <<< */	
		
		#scrollSouth {
			position:absolute;
			left: 160px;
			top: 220px;
			width: 500px;
			height: 200px;		
		}
		
		#scrollSouth p {
			color: #CCC;
			font-size: 11px;
			margin-left: 28px;
			margin-top: -5px;
		}
		
		#work {
			position: relative;
			left:-40px;
			top: 400px;
		}
		
		#work a {
			padding: 50px 0;
		}
		
		.info {
			position: relative;
			height: 350px;
			width: 900px;
			border-top: dashed grey 1px;
			border-bottom: dashed grey 1px;
			background: url(images/clientItems.png) -100px -15px;
			font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;	
		}
		
		.infoLeftSide {
			width: 420px;
			height: 150px;
			float: left;
			margin-top: 60px;	
		}
		
		.infoLeftSide h1 {
			color: white;
			letter-spacing: 2.3px;
			font-size: 24px;
		}
		
		.infoLeftSide h3 {
			color: white;
			letter-spacing: 2.3px;
			font-size: 22px;
		}
		
		.infoLeftSide p {
			color: #666;
			line-height: 20px;
		}
		
		.infoRightSide {
			width: 470px;
			height: 150px;
			float: right;
			margin-top: 60px;	
		}
		
		.infoRightSide h2 {
			color: white;
			font-size: 16px;
		}
			
		.infoRightSide a {
			text-decoration: none;
			color: white;
			font-size: 16px;
		}
		
		.infoRightSide p {
			color: white;
			letter-spacing: 1px;
			font-weight: normal;
			font-size: 12px;
			padding-bottom: 10px;
			line-height: 18px;
		}
		
		#infoLinked {
			position: absolute;
			left: 420px;
			top: 172px;
			height: 40px;
		}
		
		#infoScope {
			position: absolute;
			left: 420px;
			top: 250px;
			height: 40px;
		}
		
		#projectNav {
			width: 200px;
			border: white;
			position: fixed;
			right: 30px;
			bottom: 45px;
		}
		
		#projectNav ul {
			list-style: none;
		}
		
		#projectNav li {
			text-align: right;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			letter-spacing: 1.5px;
			font-size: 11px;
			padding: 6px 5px;
		}
		
		#projectNav li:hover {
			background: white;
		}
		
		#projectNav a {
			text-decoration: none;
			color: #333;
		}
		
		#projectNav a:hover {
			color: #0C0;
		}
		
		/* >>> INDIVIDUAL PROJECTS <<< */
		
			/* Agloves */							
				
				#aglovesHand {
					background:  url(images/fullSize/agloves_handsticker.png) no-repeat;
					background-position: 0, 0;
				}
				
				#aglovesHand:hover {
					background-position: -900px, 0px;
				}	
				
				#aglovesTwo {
					background:  url(images/fullSize/agloves_two.png) no-repeat;
					background-position: 0, 0;
					margin-top: -80px;
				}
				
				#aglovesTwo:hover {
					background-position: -900px, 0px;
				}	
			
				#aglovesThree {
					background:  url(images/fullSize/agloves_three.png) no-repeat;
					background-position: 0, 0;
					margin-top: -80px;
					margin-bottom: -30px;
				}
				
				#aglovesThree:hover {
					background-position: -900px, 0px;
				}	
				
			/* BearCam */							
				
					#bearcam {
					background:  url(images/fullSize/bearcam.png) no-repeat;
					background-position: 0, 0;
					margin-top: -125px;
					margin-bottom: -120px;
				}
				
				#bearcam:hover {
					background-position: -900px, 0px;
				}	
				
			
			/* Billys */
								
				#billys_assets {				
					background: url(images/fullSize/billys_assets.png) no-repeat;
					background-position: 0, 0;
					margin-bottom:-90px;	
					margin-top: -50px;	
				}
				
				#billys_assets:hover {
					background-position: -900px, 0px;					
				}
				
				#billys_site {
					background: url(images/fullSize/billys_site.png) no-repeat;
					background-position: 0, 0;
					margin-top: -110px;
				}
				
				#billys_site:hover {
					background-position: -900px, 0px;				
				}
				
			
			/* Birchbenders */
				
				
				#birchbendNav {
					background:  url(images/fullSize/birchbend_nav.jpg) no-repeat;
					background-position: 0, 0;
					margin-bottom: -50px;
				}
				
				#birchbendNav:hover {
					background-position: -900px, 0px;
				}	
				
				#birchbendRecipe {
					background:  url(images/fullSize/birchbend_recipes.jpg) no-repeat;
					background-position: 0, 0;
					margin-bottom: -50px;
				}
				
				#birchbendRecipe:hover {
					background-position: -900px, 0px;
				}	
				
				#birchbendArticles {
					background:  url(images/fullSize/birchbend_articles.jpg) no-repeat;
					background-position: 0, 0;
				}
				
				#birchbendArticles:hover {
					background-position: -900px, 0px;
				}	
		
			
			
			/* Cafe Aion */							
				
					#cafeaion {
					background: url(images/fullSize/cafeaion.png) no-repeat;
					background-position: 0;
					margin-top: -100px;
					margin-bottom: -70px;
				}
				
				#cafeaion:hover {
					background-position: -900px, 0;
				}	
			
			
			/* Callies */							
				
				#callies {
					background: url(images/fullSize/callies.png) no-repeat;
					background-position: 0;
					margin-top: -60px;
					margin-bottom: -90px;
				}
				
				#callies:hover {
					background-position: -900px, 0;
				}	
				
			/* The Goonies */	
			
						#goonies {
					background: url(images/fullSize/goonies.png) no-repeat;
					background-position: 0;
					margin-top: -20px;
					margin-bottom: -20px;
				}
				
				#goonies:hover {
					background-position: -900px, 0;
				}						
			
			/* Gray and Gold */
			
				
				#grayandgold {
					background: url(images/fullSize/grayandgold.png) no-repeat;
					background-position: 0;
					margin-top: -100px;
					margin-bottom: -110px;
				}
				
				#grayandgold:hover {
					background-position: -900px, 0;
				}
			
			/* Jessica Saba */
					
					#jessicasabaLogo {
					background:  url(images/fullSize/jesssaba_logo.png) no-repeat;
					background-position: 0, 0;
					margin-top: -75px;
					margin-bottom: -75px;
					
				}
				
				#jessicasabaLogo:hover {
					background-position: -900px, 0px;
				}	
			
			
			
			
			
			/* Karl Lawrence */	
			
				#carlContactUs {
						background: url(images/fullSize/karl_contactus.png) no-repeat;
						background-position: 0;
						margin-top: -100px;
						margin-bottom: -150px;
					}
					
					#carlContactUs:hover {
						background-position: -900px, 0;
					}
				
					#carlOurStory {
						background: url(images/fullSize/karl_ourstory.png) no-repeat;
						background-position: 0;
						
					}
					
					#carlOurStory:hover {
						background-position: -900px, 0;
					}
					
					#carlSignUp {
						background: url(images/fullSize/karl_signup.png) no-repeat;
						background-position: 0;
						margin-bottom: -190px;
						margin-top: -90px;
					}
					
					#carlSignUp:hover {
						background-position: -900px, 0;
					}
				
			/* The Polish Ambassador */							
				
				#tpa1 {
					background:  url(images/fullSize/tpa1.png) no-repeat;
					background-position: 0, 0;
					margin-bottom: -110px;
					margin-top: -120px;
				}
				
				#tpa1:hover {
					background-position: -900px, 0px;
				}	
				
				#tpa2 {
					background:  url(images/fullSize/tpa2.png) no-repeat;
					background-position: 0, 0;
					margin-top: -160px;
				}
				
				#tpa2:hover {
					background-position: -900px, 0px;
				}				
			
			
			
			/* TwoCox */
				
					
				
				#twocoxLogo {
					background:  url(images/fullSize/twocox_logo.png) no-repeat;
					background-position: 0, 0;
					margin-bottom: -80px;
					margin-top:-40px;
				}
				
				#twocoxLogo:hover {
					background-position: -900px, 0px;
				}	
				
				#twocoxSite {
					background:  url(images/fullSize/twocox_home.jpg) no-repeat;
					background-position: 0, 0;
					margin-top: -100px;
				}
				
				#twocoxSite:hover {
					background-position: -900px, 0px;
				}