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

body {
	margin: 0;
	padding: 0;
	line-height: 1.3em;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: small;
	color: #4F4F4F;
	background: #fff url(../images/bg_body.jpg) repeat-x top left;
}



/* ----- header ----- */

#header {
	position: relative;
	margin: 0 auto;
	width: 614px;
	height: 133px;
	background: transparent url(../images/header.jpg) no-repeat top left;
}
	#header h1{
		margin: 0;
		padding: 0;
	}
		#header h1 a {
			position: absolute;
			top: 20px;
			left: 30px;
			display: block;
			width: 220px;
			height: 70px;
			text-indent: -9000px;
		}
	#header ul {
		width: 308px;
		height: 34px;
		padding-left: 25px;
		margin-top: 92px;
		float: left;
		list-style: none;
	}
		#header ul li {
			text-indent: -9999px;
			display: inline;
			margin: 0;
			padding: 0; 
		}
			#header ul li a {
				color: #afad92;
				text-decoration: none;
				float: left;
				background: transparent url(../images/nav.gif) no-repeat;
			}
			#header li#work a {
				width: 104px;
				height: 34px;
			}
			#header li#links a {
				width: 104px;
				height: 34px;
			}
			#header li#contact a {
				width: 100px;
				height: 34px;
			}
		
			#header li#links a:link, #header li#links a:visited {
				background-position:-104px 0px;
			}
			#header li#contact a:link, #header li#contact a:visited {
				background-position:-208px 0px;
			}

			#header li#work a:hover, #header li#work a:focus {
				background-position:-0px -34px;
			}
			#header li#links a:hover, #header li#links a:focus {
				background-position:-104px -34px;
			}
			#header li#contact a:hover, #header li#contact a:focus {
				background-position:-208px -34px;
			}
			
			/*----- MAIN NAVIGATION ACTIVE STATE -----*/

			.workPage #header li#work a {
				background-position: 0px -34px;
			}
			.linksPage #header li#links a {
				background-position: -104px -34px;
			}
#leftShadow, #rightShadow {
	position: absolute;
	top: 0px;
	width: 7px;
	height: 238px;
}
	#leftShadow {
		left: 0px;
		background: transparent url(../images/drop_shadow_lt.gif) repeat-x top left;
	}
	#rightShadow {
		right: 0px;
		background: transparent url(../images/drop_shadow_rt.gif) repeat-x top right;
	}

/* ----- container ----- */

#container {
	position: relative;
	margin:  0 auto;
	width: 614px;
	font-size: 98%;
	background: #8C8C8C url(../images/bg_cont.gif) repeat-y top left;
}
	#container .gutter {
		position: relative;
		margin: 0 11px;
		padding: 27px 18px 18px 18px;

		background: transparent url(../images/cont_grad.gif) repeat-x top left;
	}
	
	/* ----- intro ----- */
	
	#container #intro {
		position: relative;
		width: 562px;
		height: 262px;
		color: #4F4F4F;
		background: transparent url(../images/hdr_sub.jpg) no-repeat top left;
	}
		#container #intro h2, #container #intro p {
			position: relative;
			width: 240px;
		}
		#container #intro h2 {
			top: 47px;
			left: 297px;
			font-weight: normal;
			font-size: 170%;
		}
		#container #intro p {
			top: 43px;
			left: 299px;
			font-size: 110%;
		}
		#container #intro a {
			position: absolute;
			width: 155px;
			display: block;
			line-height: 29px;
			color: #badfe7;

		}
		#container #intro a:hover {
			color: #4F4F4F;
		}
			#container #intro a#downloadPortfolio {
				top: 167px;
				left: 418px;
			}
			#container #intro a#resume {
				top: 192px;
				left: 418px;
			}
	
	
	
	/* ----- contact ----- */
	
	#container #contactWrapper {	
		position: relative;
		margin-top: 35px;
		width: 100%;
		float: left;
		/* background: #fff url(../images/contactBG.gif) repeat-y top left; */
	}
	#arrow a {
			
			position: relative;
			display: block;
			text-indent: -9000px;
			left: 490px;
			top: 0px;
			width: 57px;
			height: 36px;
			/**/
			 background: url(../images/arrow_up_contact.jpg) no-repeat top right; 
	}
		#container #contactWrapper #contactInfo {
			float: left;
			width: 556px;
			background-color:#fff;
			
			/* */
			 background: transparent url(../images/bg_work.gif) repeat-y top left; 
			
		}

			#container #contactWrapper #contactInfo h2 {
				padding-top: 34px;
				padding-left: 14px;
				font-size: 140%;
				color: #4F4F4F;
				/* background: transparent url(../images/contactInfoTop.gif) no-repeat top left; */
			}
			#container #contactWrapper #contactInfo h3, #container #contactWrapper #contactInfo p {
				margin-left: 16px;
			}
			#container #contactWrapper #contactInfo h3 {
				padding-top: 27px;
				margin-right: 23px;
				margin-top: 8px;
				margin-bottom: 3px;
				font-size: 110%;
				color: #26353d;
				border-top: 1px solid #0099CC;
			}
			#container #contactWrapper #contactInfo p {
				margin-bottom: 10px;
				margin-top: 0;
				color:#8C8C8C;
			}
			#container #contactWrapper #contactInfo a {
				font-weight: bold;
				color: #0099CC;
			}
			
		#container #contactWrapper #contactForm {
			position: relative;
			width: 332px;	
			float: right;
			/* background: transparent url(../images/contactFormTop.gif) repeat-x top left;*/
		}
		/*	#container #contactWrapper #contactForm a {
				position: relative;
				display: block;
				text-indent: -9000px;
				left: 275px;
				top: 0px;
				width: 57px;
				height: 36px;
				
				 background: url(../images/arrow_up_contact.jpg) no-repeat top right; 
			}*/
		#container #contactWrapper form {
			float: left;
			padding: 22px 17px 3px 10px;
		}
		/* 
		Hack for IE 6 and below 
		-> add more padding below the form
		*/
		* html #container #contactWrapper form {
			padding: 36px 17px 14px 10px;
		}
			#container #contactWrapper form .btn {
				float: left;
			}
			#container #contactWrapper form #formStatus {
				margin-top: 7px;
				float: right;
				width: 210px;
			}
				#container #contactWrapper form #formStatus p {
					padding-left: 19px;
					margin-top: 0;
				}
				#container #contactWrapper form #formStatus .error {
					color: red;
					background: transparent url(../images/errorIcon.gif) no-repeat center left;
				}
				#container #contactWrapper form #formStatus .success {
					background: transparent url(../images/successIcon.gif) no-repeat center left;
				}


	/* ----- footer ----- */
	
	#container #footer {
		height: 65px;
		font-size: 98%;
		color: #fff;
		background: #4F4F4F url(../images/footer.jpg) no-repeat bottom left;
	}
		#container #footer p {
			padding-top: 20px;
			padding-left: 29px;
		}
		#container #footer a {
			color: #fff;
		}

/*LASTFM*/
div.lastfm_quilt_black a,div.lastfm_quilt_black div {
height: 20px;
margin: 0;
overflow: hidden;  
text-decoration: none;  
padding: 0;  
background: url("http://panther1.last.fm/quilts/buttons/generic_images/bg_black.gif") repeat-x 0 0;
width: 100%;
float: right;
display: inline;
}
div.lastfm_quilt a:hover {background-position: 0 0 !important;}
div.lastfm_quilt_horizontal { width: 560px;}
div.lastfm_quilt_black a.lastfm_quilt_artists_wide,div.lastfm_quilt_black a.lastfm_quilt_artists_wide:hover {  background: url("http://panther1.last.fm/quilts/buttons/top_artists_images/wide/header_black.gif") no-repeat 0 -20px;}
div.lastfm_quilt_black a.lastfm_quilt_albums_wide,div.lastfm_quilt_black a.lastfm_quilt_albums_wide:hover {background: url("../images/hdr_last_black.gif") no-repeat 0 -20px;}
div.lastfm_quilt_black .lastfm_quilt_profile a,div.lastfm_quilt_black .lastfm_quilt_profile a:hover {  background: url("http://panther1.last.fm/quilts/buttons/generic_images/ft_black.gif") no-repeat 0 -20px;}
div.lastfm_quilt_black .lastfm_quilt_noprofile a,div.lastfm_quilt_black .lastfm_quilt_noprofile a:hover {background: url("http://panther1.last.fm/quilts/buttons/generic_images/npft_black.gif") no-repeat 0 -20px;}
div.lastfm_quilt a.get_your_own {  width: 92px;  border-right: solid 1px #000000;}
div.lastfm_quilt a.visit {width: 91px;  background-position: -93px -20px;}
div.lastfm_quilt a.visit:hover {   background-position: -93px 0 !important;}
/* ----- //LASTFM  ------*/

/* ----- HTML ----- */
h1, h2 {
	margin:  0;
	padding:  0;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}
a:link, a:visited {
	color: #0099CC;
	text-decoration: none;
	outline: none;
}
a:hover, a:active {
	color: #8C8C8C;
}
img {
	border: none;
}


/* ----- form ----- */
input, textarea {
	font-size: 110%;
	padding: 4px;
	border: none;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
label {
	font-weight: bold;
	color: #4F4F4F;
}
textarea {
	height: 130px;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
.txt {
	width: 296px;
	color: #8C8C8C;
	border: none;
	background: #abcadb;
}
.inputHighlighted{  /* Highlighting style */
	width: 296px;
	color: #fff;
  	background-color:#6f8b9b;
}

/* ---- class -----*/
.clear {
	clear: both;
}