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;
}

body {
	line-height: 1;
	font: normal 62.5% 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	background: #fff url('../img/bg.gif') repeat-x;
}

a { color: #176469; text-decoration: none; }
a:hover { color: #4B8B8B; border-bottom: 1px dotted #4B8B8B; }

ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
*+html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/**********
WRAPPER
**********/
#wrapper {
	width: 960px;
	margin: 0 auto;
	}
	
/********************
	HEADER
********************/
	#header {
		width: 960px;
		height: 125px;
		}
		
/******************************
		LOGO
******************************/
		#logo {
			margin: 40px 0 0;
			width: 260px;
			height: 43px;
			font-size: 1.6em;
			color: #000;
			height: 43px;
			background: transparent url('../img/logo.gif') no-repeat;
			text-indent: -9000px;
			float: left;
			}

/******************************
		NAVIGATION
******************************/		
		#nav {
			margin: 45px 0 0;
			width: 280px; /* 480px for full nav bar */
			float: right;
			}
			
			* html #nav { width: 340px; }
			
			#nav li {
				display: inline;
				}
				
				#nav li a {
					display: block;
					margin: 0 0 0 55px;
					float: left;
					height: 30px;
					text-indent: -9000px;
					}
					#nav li a:hover { border: none; }
			
					#nav li#portfolio a { width: 80px; background: url('../img/nav-portfolio.gif') top left no-repeat; }
						#nav li#portfolio a:hover { background: url('../img/nav-portfolio.gif') 0px -30px no-repeat; }
						#nav li#portfolio a.current, #nav li#portfolio a.current:hover { background: url('../img/nav-portfolio.gif') 0px -60px no-repeat; }
					#nav li#about a { width: 55px; background: url('../img/nav-about.gif') top left no-repeat; }
						#nav li#about a:hover { background: url('../img/nav-about.gif') 0px -30px no-repeat; }
						#nav li#about a.current, #nav li#about a.current:hover { background: url('../img/nav-about.gif') 0px -60px no-repeat; }
					#nav li#code a { width: 50px; background: url('../img/nav-code.gif') top left no-repeat; }
						#nav li#code a:hover { background: url('../img/nav-code.gif') 0px -30px no-repeat; }
						#nav li#code a.current, #nav li#code a.current:hover { background: url('../img/nav-code.gif') 0px -60px no-repeat; }
					#nav li#contact a { width: 70px; background: url('../img/nav-contact.gif') top left no-repeat; }
						#nav li#contact a:hover { background: url('../img/nav-contact.gif') 0px -30px no-repeat; }
						#nav li#contact a.current, #nav li#contact a.current:hover { background: url('../img/nav-contact.gif') 0px -60px no-repeat; }
						
						
/******************************
		CONTENT
******************************/
#content-wrapper {
	width: 100%;
	border-bottom: 1px solid #cfe5e7;
	background: #eaf6f7;
	}

		#content {
			position: relative;
			clear: both;
			width: 960px;
			margin: 0 auto;
			}
			
			#content h3 { font-size: 2em; margin: 10px 0 0; }
			#content h4 { font-size: 1.2em; color: #176469; margin: 5px 0; text-transform: uppercase; }
			
			#about ul, #code ul, #contact ul { margin: 0 0 0 20px; list-style: circle; }
				#about ul li, #code ul li, #contact ul li { padding: 0 0 0 20px; }
				
			#content p {
				font-size: 1.1em;
				line-height: 1.75em;
				padding: 0 0 10px;
				}
				
			a.social-network {
				display: block;
				font-size: 1.1em;
				line-height: 1.75em;
				padding: 10px 0 10px 5px;
				border-bottom: 1px solid #E0EAEB;
				}
				a.social-network img {
					display: block;
					margin: 0 10px 0 0;
					padding: 0;
					float: left;
					}
				a.social-network:hover {
					text-decoration: none;
					border-bottom: 1px solid #CFE5E7;
					background: url('../img/ico-arrow.png') 300px 50% no-repeat;
					}
			
			.error {
				background: #f4eabe url('../img/ico-warning.png') 10px center no-repeat;
				padding: 10px 10px 10px 70px !important;
				margin: 10px 0;
				border: 1px solid #e2d6a2;
				}
			.success {
				background: #a2f884 url('../img/ico-success.png') 10px center no-repeat;
				padding: 10px 10px 10px 70px !important;
				margin: 10px 0;
				border: 1px solid #84de64;
				}
						
/***************************************
			PORTFOLIO
***************************************/
			#portfolio-clients {
				position: relative;
				padding: 50px 0 0;
				overflow: hidden;
				}
				
				#portfolio-clients ul {
					width: 960px;
					}
				
					#portfolio-clients li {
						width: 960px;
						height: 425px;
						}
						
						#portfolio-clients img {
							display: block;
							margin: 0;
							padding: 0;
							}
										
					#prevBtn, #nextBtn{
						position: absolute;
						bottom: -25px;
						left: -25px;
						display: block;
						width: 110px;
						height: 50px;
						float: left;
						}
					
					#nextBtn { left: 880px; }
																			
					#prevBtn a, #nextBtn a {  
						display:block;
						width: 110px;
						height: 50px;
						background: url('../img/btn-prev.png') no-repeat 0 0;
						text-indent: -9000px;
						border: none;
						}
						
					#nextBtn a{ 
						background: url('../img/btn-next.png') no-repeat 0 0;	
						}
						
/***************************************
			ABOUT
***************************************/
			#about {
				padding: 25px 0;
				}
				
				#about #me {
					width: 940px;
					height: 250px;
					background: #CFE5E7;
					margin: 10px 0 30px;
					border: 5px solid #fff;
					}
				
				#about .about-left {
					width: 450px;
					padding: 0 25px 0 0;
					float: left;
					display: inline;
					}
					
				#about .about-right {
					width: 450px;
					padding: 0 0 0 25px;
					float: left;
					display: inline;
					border-left: 1px solid #CFE5E7;
					}
				
/***************************************
			CONTACT
***************************************/
			#contact {
				padding: 20px 0;
				}
				
				#contact .contact-left {
					width: 319px;
					padding: 0;
					float: left;
					display: inline;
					}
					#contact .contact-left h4 {
						margin: 0;
						padding: 10px 0;
						border-bottom: 1px solid #CFE5E7;
						}
					#contact .contact-left p {
						padding: 10px 10px 10px 0;
						}
						
				#contact .contact-right {
					width: 640px;
					float: right;
					display: inline;
					border-left: 1px solid #CFE5E7;
					}
					
					#contact .contact-right h4 {
						margin: 0;
						padding: 10px 25px 10px 25px;
						border-bottom: 1px solid #CFE5E7;
						}
				
				.contact-right form {
					margin: 0 0 25px 0;
					padding: 0 0 0 25px;
					}
					
				.contact-right label {
					display: block;
					padding: 13px 0 2px;
					font-size: 1.2em;
					}
					
				.contact-right .textbox {
					margin: 0;
					display: block;
					width: 580px;
					padding: 4px;
					font: normal 1.1em 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
					border: 1px solid #CFE5E7;
					border-top: 2px solid #CFE5E7;
					}
					
				.contact-right textarea {
					display: block;
					width: 580px;
					height: 250px;
					padding: 4px;
					font: normal 1.1em 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
					border: 1px solid #CFE5E7;
					border-top: 2px solid #CFE5E7;
					}
					
				.contact-right #submit {
					display: block;
					margin: 5px 0 0;
					}
				
/******************************
		SOCIAL
******************************/
#social-wrapper {
	width: 100%;
	background: #fff;
	}
		#social {
			clear: both;
			width: 960px;
			margin: 0 auto;
			padding: 10px 0 20px;
			}
			
			#social .service {
				width: 300px;
				float: left;
				display: inline;
				}
				
				#social .service h4 {
					font-size: 1.8em;
					background: url('../img/bg-underline.gif') bottom left no-repeat;
					color: #255E5C;
					padding: 3px 0 7px
					}
					
					#social .service h4 a {
						display: block;
						height: 50px;
						line-height: 50px;
						padding: 0 0 0 50px;
						color: #255E5C;
						text-decoration: none;
						border: none;
						}
						
			#twitter { margin: 0 30px 0 0; }
				#twitter h4 a { background: url('../img/social-twitter.gif') no-repeat; }
			#lastfm { margin: 0 30px 0 0; }
				#lastfm h4 a { background: url('../img/social-lastfm.gif') no-repeat; }
			#delicious { margin: 0; }
				#delicious h4 a { background: url('../img/social-delicious.gif') no-repeat; }
				
			.links ul li a {
				display: block;
				height: 30px;
				line-height: 30px;
				color: #444;
				border-bottom: 1px solid #e9e9e9;
				text-decoration: none;
				word-wrap: nowrap;
				overflow: hidden;
				}
				.links ul li a:hover {
					color: #1a1a1a;
					border-bottom: 1px solid #d1d1d1;
					}
				
			#twitter .links ul li {
				padding: 5px 0;
				display: block;
				height: 51px;
				color: #444;
				border-bottom: 1px solid #e9e9e9;
				text-decoration: none;
				overflow: hidden;
				line-height: 1.6em;
				}
				
				#twitter .links ul li a {
					display: inline;
					height: auto;
					line-height: normal;
					padding: 0;
					}
	
/**********
FOOTER
**********/
#footer {
	clear: both;
	background: #262f30;
	border-top: 1px solid #0d0e0e;
	color: #fff;
	}
	
	#footer-center {
		width: 960px;
		margin: 0 auto;
		padding: 20px 0;
		}
		
		#footer-center .copyright {
			float: left;
			width: 450px;
			margin: 10px 0 0;
			}
			
		#footer-center .credits {
			float: right;
			width: 100px;
			text-indent: -9000px;
			}
			#footer-center .credits a {
				color: #CFE6E8;
				display: block;
				float: left;
				width: 40px;
				height: 30px;
				text-decoration: none; 
				}
				#footer-center .credits a:hover { text-decoration: none !important; }
				#freshmedia { background: url('../img/freshmedia.png') no-repeat; }
				#symphony { background: url('../img/symphony.png') no-repeat; }