/*
* Font Stacks:
* Body text:    times, "times new roman", serif
* Headers, etc: "Jigsaw Medium", "futura", helvetica, arial, sans-serif
*/

@import url("base.css");

html {
	background: #fff url("../images/laurel-right.png") no-repeat fixed 120% 40px;
	background: url("../images/laurel-right.png") no-repeat fixed 120% 40px, url("../images/chairbase.jpg") fixed;
}
	body {
		background: transparent;
/*		background-image: url("../images/baseline-20.png");*/
		font-family: times, "times new roman", serif;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		color: rgba(0,0,0,0.8);
	}

	a {
		color: #333;
		background: #ffffcc;
		background: rgba(255,255,0,0.25);
		padding: 0.1em 0 0;
		border-bottom: 1px dotted #333;
		text-decoration: none;
	}
	a:hover {
		background: #333;
		color: #fff;
		text-decoration: none;
	}
	
	a[rel=author] {
		padding-right: 22px;
		background-image: url("../images/envelope.png");
		background-position: 98% 50%;
		background-repeat: no-repeat;
	}
	a[rel=author]:hover {
		background-image: url("../images/envelope-i.png");
	}
	
	abbr {
		cursor: help;
		font-style: italic;
		letter-spacing: 1px;
	}
	
	section {
		clear: both;
		overflow: hidden;
	}
	
	p, ul {
		margin: 0 0 20px;
	}
	
	
	.col1 {
		float: left;
		width: 280px;
		margin-right: 20px;
	}

	.col2 {
		float: left;
		width: 430px;
	}
	
	
	#content {
		position: relative;
		width: 750px;
		margin: 100px auto 0;
		padding-left: 150px;
		background: transparent;
	}
	
	#logo {
		position: absolute;
		left: 25px;
		top: -100px;
		width: 105px;
		height: 60px;
		background: #3cf url("../images/R-100.png") no-repeat 5px 5px;
	}

	#the_basics {
		font-style: italic;
	}
		#hello {
			display: inline-block;
			position:relative;
			width: 0px;
			height: 1em;
		}
			#hello span {
				position: absolute;
				right: 20px;
				white-space: nowrap;
			}
		
		h1 {
			display: inline;
			font-family: "Jigsaw Medium", "futura", helvetica, arial, sans-serif;
			font-size: 60px;
			line-height: 80px;
			font-style: normal;
			font-weight: normal;
		}
		
		#the_basics li {
			display: inline;
		}
	
	
	
	#bio {
		margin-top: 120px;
		clear: none;
	}
		.icons {
			overflow: hidden;
		}
		.icons li {
			float: left;
			width: 32px;
			height: 32px;
			margin: 0 24px 8px 0;
		}
		.icons li a {
			padding: 0;
			background: transparent;
			border: none;
		}
		
	
	#projects {
		padding-top: 20px;
	}
		h2 {
			height: 24px;
			margin: 0px 0 16px;
			margin-right: 170px;
			padding: 0px 6px 0;
			font-size: 14px;
			line-height: 24px;
			background: #3cf;
/*			background: #333;*/
/*			background: #f30;*/
			color: #fff;
			font-weight: normal;
			text-transform: uppercase;
			letter-spacing: 0.1em;
		}
		
		#projects li {
			float: left;
			width: 280px;
			margin: 0 20px 40px 0;
		}
		
		#projects li:nth-child(odd) {
			clear: left;
		}
		
		#projects li {
			position: relative;
			margin-bottom: 1.4em;
		}
			#projects .proj_env {
				position: relative;
				font-family: "Jigsaw Medium", "futura", helvetica, arial, sans-serif;
				color: #666;
				margin-left: 0.6em;
				cursor: default;
			}
			#projects .proj_env span {
				margin-right: 0.4em;
				border: 1px solid #ccc;
				-webkit-border-radius: 3px;
				   -moz-border-radius: 3px;
				padding: 0 0.3em;
				white-space: nowrap;
			}
		#projects h3 {
			display: inline;
			font-weight: normal;
		}
			#projects h3 a {
				padding: 0;
			}


	footer {
		clear: both;
		margin: 57px 0 20px 300px;
		padding: 3px 0 3px 52px;
		background: url("../images/R-50-black.png") no-repeat 0px 50%;
	}