@charset "UTF-8";
/* CSS Document */

body{
	background:url(/images/page_bg.jpg) left top repeat;
	font-family: Arial, Helvetica, sans-serif;
}

#wrapper{
	background:url(/images/wrapper_bg.jpg) left top repeat-x;
}

	#container{
		width:960px;
		margin:0 auto;
	}
	
		#header{
			background:url(/images/header.png) left top no-repeat;
			height:115px;
			width:960px;
			position:relative;
		}
		
			#header .homelink{
				display:block;
				height:115px;
				width:300px;
				text-indent:-9999px;
				position:absolute;
				top:0;
				left:0;
			}
		
			#header .icreate{
				display:block;
				height:115px;
				width:500px;
				text-indent:-9999px;
				position:absolute;
				top:0;
				right:0;
			}
		
		#pagetop{
			background: url(/images/toparea.jpg) left top no-repeat;
			width:960px;
			height:648px;
			position:relative;
		}
		
			#pagetopText{
				padding:15px;
				color:#c8b9b2;
				font-size:15px;
				line-height:33px;
				position:absolute;
				z-index:1;
				top:0;
				left:0;
				letter-spacing:3px;
				text-align:center;
				width:930px;
			}
		
				#pagetopText a{
					color:#c8b9b2;
				}
		
				#pagetopText h1{
					display:inline;
					font-size:28px;
					font-weight:normal;
				}
			
				#pagetopText h2{
					display:inline;
					font-size:25px;
					font-weight:normal;
				}
			
				#pagetopText h3{
					display:inline;
					font-size:21px;
					font-weight:normal;
				}
			
				#pagetopText p{
					display:inline;
					font-size:15px;
				}
		
			.lW { 
				float: left; 
				clear: left; 
				height: 14px;
			}
			
			.rW { 
				float: right; 
				clear: right; 
				height: 14px;
			}
			
			#services{
				position:absolute;
				left:9px;
				top:160px;
				font-size:17px;
				color:#c8b9b2;
				width:174px;
				z-index:2;
			}
			
				#services li{
					margin:12px 0;
					padding:8px 0 8px 40px;
					height:17px;
					background:url(/images/checkmark.png) left top no-repeat;
				}
				
			#me{
				position:absolute;
				left:201px;
				top:278px;
				width:174px;
				z-index:3;
			}
			
				#bio {
					display:none;
					background:url(../images/tooltip_lg2.png);
					height:130px;
					padding:30px 30px 53px 30px;
					width:310px;
					font-size:14px;
					color:#444;
					z-index:10;
					line-height:1.5em;
					margin-top:60px;
				}
				
					#bio a{
						color:#444;
					}
			
			#links{
				position:absolute;
				left:576px;
				top:300px;
				width:192px;
				z-index:4;
			}
			
				#links li a{
					display:block;
					text-align:right;
					padding:9px 9px;
					height:28px;
					font-size:28px;
					color:#7d858d;
					text-decoration:none;
				}
			
					#links li a:hover{
						color:#9da5ad;
						color:#cc612a;
					}
					
			#twitterbox{
				position:absolute;
				z-index:5;
				top:195px;
				left:777px;
				width:174px;
				text-align:right;
				color:#9cb0a9;
			}
			
				#twitter{
					font-size:11px;
				}
			
					#twitter a{
						color:#9cb0a9;
					}
					
					#twitter li{
						padding:10px 0;
					}
					
						#twitter li span{
							display:block;
						}
						
			#workdone{
				width:418px;
				height:81px;
				background:url(/images/workdone.png) left top no-repeat;
				position:absolute;
				bottom:0;
				left:271px;
				overflow:hidden;
				text-indent:-9999px;
			}
		
		#content{
			background:url(/images/content_bg.jpg) left top repeat-y;
			width:920px;
			padding:20px;
		}
		
			#slideshowbox{
				position:relative;
				width:920px;
				height:320px;
			}
		
			#slideshow{
				width:900px;
				height:280px;
				background:#c8b9b2;
				padding:10px;
				overflow:hidden;
				position:relative;
			}
			
				.slide{
					width:900px;
					height:280px;
					background:#333;
					display:none;
					position:absolute;
					top:10px;
					left:10px;
					font-size:12px;

				}
				
					.screen{
						float:left;
						display:block;
					}
				
					.description{
						float:left;
						display:block;
						width:324px;
						height:250px;
						padding:15px;
						position:relative;
					}
					
						.description h3{
							font-size:30px;
							font-weight:normal;
							color:#9da6ae;
							padding:0 0 1px 0;
						}
						
						.description a.slidelink{
							color:#C8B9B2;
							font-size:13px;
							font-style:italic;
							display:block;
							padding:0 0 10px 0;
						}
						
						.description p{
							color:#eee;
							line-height:18px;
							font-size:14px;
						}
						
							.description p.credit{
								font-size:11px;
								font-style:italic;
								color:#ccc;
								position:absolute;
								bottom:15px;
								right:15px;
								text-align:right;
							}
						
								.description p.credit a{
									color:#ccc;
								}
						
					.used{
						list-style:square;
						padding:5px 0 5px 15px;
						color:#eee;
					}
					
						.used li{
							padding:3px 0;
						}
				
				/* tabs (those little circles below slides) */
				.slidetabs {
					clear:both;
					margin-left:438px;
				}
				
				/* single tab */
				.slidetabs a {
					width:8px;
					height:8px;
					float:left;
					margin:3px;
					background:url(../images/navigator.png) 0 0 no-repeat;
					display:block;
					font-size:1px;		
				}
				
				/* mouseover state */
				.slidetabs a:hover {
					background-position:0 -8px;      
				}
				
				/* active state (current page state) */
				.slidetabs a.current {
					background-position:0 -16px;     
				} 	
				
				
				/* prev and next buttons */
				.forward, .backward {
					float:left;
					background:#fff url(../images/prevnext.png) no-repeat;
					display:block;
					width:30px;
					height:90px;
					cursor:pointer;
					font-size:1px;
					text-indent:-9999em;
					position:absolute;
					top:105px;
					z-index:2;
					
				}
				
				/* next */
				.forward 				{ background-position: -30px 0; clear:right;right:0px; }
				.forward:hover 		{ background-position: -30px -90px; }
				
				
				/* prev */
				.backward			{ left:0; }
				.backward:hover  		{ background-position:0 -90px; }

				#hirebox{
					width:272px;
					margin:15px auto;
					position:relative;
					height:100px;
				}
				
					#hirebutton{
						cursor:pointer;
					}
					
				#portfolio-note{
					margin:0 auto;
					width:260px;
					font-size:12px;
					font-style:italic;
					color:#9DA6AE;
				}
		
		#footer{
			background:url(/images/footer.png) left top no-repeat;
			padding:30px 0 10px 0;
			color:#9da6ae;
			font-size:12px;
			text-align:right;
		}