body { }

a {
	color: #85b722; }

	a:visited {
		color: #411863; }

	a:hover {
		color: #6d276b;
		text-decoration: none; }

h3 {
	color: #411863;
	font: bold 160%/100% "Time New Roman", Times, serif;
	letter-spacing: 3px;
	margin-bottom: 0;
}

hr {
	clear: both;
	height: 6px;
	border: 0;
	border-top: solid 6px #6d276b;
	margin: 30px auto;
	width: 95%; }

blockquote {
	background: url(left-quote.gif) no-repeat left top;
	margin: 70px;
	padding: 10px 40px 0 50px;
	text-align: center;
}

#container {
	margin: 60px auto;
	position: relative;
	width: 700px; }

#header {
	background: url(joeles_header_sm.gif) no-repeat;
	margin: 0 auto; }

	#header a {
		display: block;
		height: 96px;
		overflow: hidden;
		margin: 0;
		text-indent: -3000px;
		width: 700px; }

#page-title {
	color: #230051;
	font: bold 185%/120% Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 6px;
	margin: 30px 20px;
	text-align: right;
}
	#index #page-title {
		display: none;
	}

#navbar {
	border-bottom: solid 6px #3a155f;
	border-top: solid 6px #3a155f;
	list-style: none;
	color: #b2501e;
	font: bold 140%/120% Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
	margin: -6px 0 30px 0;
	padding: 9px;
	text-align: center; }

	#navbar li {
		margin: 0;
		display: inline;
		padding: 0 20px; }


		#navbar li a {
			color: #85b722;
			padding: 0;
			text-decoration: none; }

		#navbar li a:hover  {
			border-bottom: solid 4px #85b722; }

#index #header {
	background: url(joeles_header.gif) no-repeat;
	height: 312px;
	width: 372px;
	text-indent: -3000px; }

#index #navbar {
	margin-top: 80px; }

#content {
	color: #333;
	line-height: 130%;
}



#footer {
	background: url(copyright.gif) no-repeat 10px 12px;
	border-top: solid 6px #230051;
	font: .90em/100% "Times New Roman", Times, serif;
	padding: 20px 0 20px 60px;
	margin-top: 60px; }

#valids {
	float: right;
	width: 180px;
}
	#valids a {
		display: block;
		float: left;
		height: 15px;
		margin: 0 4px;
		overflow: hidden;
		text-indent: -200px;
		width: 80px;
	}
	#valid-xhtml {
		background: url(valid_xhtml_80x15.png);
	}
	#valid-css {
		background: url(valid_css_80x15.png);
	}

.clear {
	clear: both;
}


/******************************
 * homepage
 ******************************/
#index blockquote {
	margin: 60px 70px 20px 70px;
}
.quote-author {
	background: url(right-quote.gif) no-repeat right top;
	font-style: italic;
	margin: -22px -40px 0 0;
	text-align: right;
	padding-top: 34px;
}
	.quote-author a {
		font-weight: bold;
	}
#next-quote {
	font-size: 90%;
	text-align: right;
}


/******************************
 * Experience
 ******************************/
.position {
	/*font: 90%/100% Arial, Verdana, Helvetica, sans-serif;*/
}
	.position p {
		margin: 0;
	}
	.position b {
		border-bottom: solid 1px #333;
		display: block;
		float: left;
	}
	.position .title {
		width: 40%;
	}
	.position .company {
		width: 35%;
	}
	.position .date {
		text-align: right;
		width: 24%;
	}
	.position ul {
		clear: both;
		margin: 0 0 10px 24px;
		padding: 0;
	}
	.position li {
		margin: 4px;
	}

#skills span {
	display: block;
	float: left;
}
#skills li {
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
}
#skills .skill {
	width: 70%;
}
#skills .experience {
	text-align: right;
	width: 30%;
}


/******************************
 * Projects
 ******************************/
.project .thumbs {
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
	width: 324px;
}
.project .thumbs img {
	border: solid 1px #999;
	float: left;
	margin: 4px 4px 0 0;
}
.project .description {
	float: left;
	width: 365px;
}

.project h3 {
	margin-bottom: 0;
}
.project p {
	margin: 8px 0;
}

.project .description ul {
	margin: 0;
	padding: 0;
}
.project .description li {
	margin-left: 22px;
}


/******************************
 * About
 ******************************/
.pic {
	border: solid 6px #3a155f;
	float: right;
	margin: 0 0 0 20px; }

#about blockquote {
	clear: both;
	margin: 40px 70px;
}


/******************************
 * Contact
 ******************************/
#contact_form p {
	clear: left; }

#contact_form label {
	display: block;
	float: left;
	font-weight: bold;
	width: 6em;
	margin: 6px 0; }

#contact_form .field {
	display: block;
	float: left;
	margin: 6px 0;
	width: 400px;  }

#contact_form .field label {
	float: none;
	display: inline;
	width: auto; }

#contact_form .text input {
	width: 400px; }

#contact_form .textarea textarea {
	height: 150px;
	width: 400px; }

#contact_form #social-networks p label,
#contact_form #social-networks p {
	margin: 2px 0;
}