/*----------------Add the Reset
---------------------------------------*/

*{ margin:0px; padding:0px; }
a img{ border: none; }
ul { list-style: none; }
body{
	background: #C4D8CD url(../images/site/bg_body.png) repeat-y scroll left top;
	color: #7E6B71;
	font: normal normal 13px "Arial", Sans-Serif;
}
.float-clear:after{
	content: ".";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	visibility: hidden;
}

/*----------------Navigation
---------------------------------------*/
#wrapper{
	width: 900px;
	position: relative;
}

#navigation{
	background: #B4563A url(../images/site/nav_bg.png) no-repeat left top;
	height: 70px;
	margin-right: 10px;
	position: relative;
	top: 20px;
	width: 920px;
	
}
#navigation h1{
	background: transparent url(../images/site/s12_logo.png) no-repeat center top;
	float: left;
	height: 66px;
	position: absolute;
	top: -7px;
	width: 220px;
}
#navigation h1 a{
	display: block;
	height: 66px;
	overflow: hidden;
	text-indent: -99999em;
	width: 220px;
}
	#navigation h1 a:hover{
		background: transparent url(../images/site/s12_logo.png) no-repeat center -66px;
	}
#navigation ul{
	float: right;
	width: 680px;
	padding: 13px 35px 0 0;
}
#navigation ul li{
	background-image: url(../images/site/nav_sprite.png);
	float: right;
}
#navigation ul li a{
	background-image: url(../images/site/nav_sprite.png);
	display: block;
	float: left;
	height: 50px;
	overflow: hidden;
	text-indent: -99999em;
}

li#home,
li#home a{
	background-position: 0px 0px;
	width: 110px;
}
	li#home a:hover{ background-position: 0px -50px; }
	
	li#home.act,
	li#home.act a,
	li#home.act a:hover{ background-position: 0px -100px; }

li#work,
li#work a{
	background-position: -116px 0px;
	width: 100px;
}
	li#work a:hover{ background-position: -116px -50px; }
	
	li#work.act,
	li#work.act a,
	li#work.act a:hover{ background-position: -116px -100px; }

li#contact,
li#contact a{
	background-position: -235px 0px;
	width: 123px;
}
	li#contact a:hover{ background-position: -235px -50px; }
	
	li#contact.act,
	li#contact.act a,
	li#contact.act a:hover{ background-position: -235px -100px; }

/*----------------Home Content
---------------------------------------*/

#homeContent{
	width: 700px;
	background: #FFFFFF;
	float: right;
	margin-top: 45px;
}
	#homeContent p a{
		color: #B4563A;
		text-decoration: none;
	}

#me{
	background: url(../images/site/joel.png) no-repeat center center;
	height: 300px;
	position: absolute;
	top: -3px;
	left: 205px;
	width: 320px;
}
#about{
	float: right;
	width: 370px;
}
#about h2{
	color: #B4563A;
	font: normal normal 20px "Century Gothic", Sans-Serif;
	margin-bottom: 15px;
	text-align: center;
}
#about p{
	line-height: 20px;
	margin:0 20px 10px;
}
#about p a{
}
#about p a:hover{}
#about p a:visited{}

#featuredProjects{
	clear: both;
	margin: 0 auto;
	width: 660px;
}
#featuredProjects h2{
	background: transparent url(../images/site/bg_featured_projects.png) no-repeat center top;
	height: 100px;
	overflow: hidden;
	text-indent: -99999em;
}

/*----------------Content Area
---------------------------------------*/
#content-wrap{
	width: 700px;
	background: #FFFFFF;
	float: right;
	margin-top: 40px;
	padding-bottom: 20px;
}
#content{
	margin: 0 auto;
	width: 660px;	
}
#content h2{
	color: #B4563A;
	font: normal normal 20px "Century Gothic", Sans-Serif;
	margin-bottom: 10px;
}
#content p{
	margin-bottom: 10px;
}

/*----------------Contact Section
---------------------------------------*/
span.req{
	color: #B4563A;
}
span.note{
	font-style: italic;
}
fieldset#contact-info{
	border: none;
}
#contact-info label{
	display: block;
	font-weight: bold;
	padding-bottom: 5px;
}
#contact-info input{
	background-color: #F2F0F1;
	border: solid 1px #7E6B71;
	color: #7E6B71;
	font-size: 20px;
	margin-bottom: 12px;
	padding: 4px;
	width: 650px;
}
#contact-info input.error,
#contact-info textarea.error{
	background-color: #E6C9C1;
	border: solid 1px #B4563A;
}
#contact-info textarea{
	background-color: #F2F0F1;
	border: solid 1px #7E6B71;
	color: #7E6B71;
	height: 175px;
	font: normal normal 14px/18px "Arial", Sans-Serif;
	margin-bottom: 12px;
	padding: 4px;
	width: 650px;	
}
fieldset#contact-submit{
	border: none;
}
#contact-error{
	background-color: #E6C9C1;
	border: solid 1px #B4563A;
	display: none;
	margin-bottom: 12px;
	padding: 10px;
}
#contact-thanks{
	background-color: #C4D8CD;
	border: solid 1px #7E6B71;
	padding: 10px 10px 0;
	margin-bottom: 12px;
}
/*----------------Project
---------------------------------------*/
#project-nav li{
	background-image: url(../images/site/project_nav_sprite.png);
	float: left;
	margin:0 1px 20px;
	padding: 0;
}
#project-nav li a{
	background-image: url(../images/site/project_nav_sprite.png);
	display: block;
	float: left;
	height: 26px;
	overflow: hidden;
	text-indent: -9999em;
	width: 100px;
}
#project-nav li#next,
#project-nav li#next a{
	background-position: 0px -26px;
}
#project-nav li#next a:hover{
	background-position: 0px 0px;
}
#project-nav li#prev,
#project-nav li#prev a{
	background-position: 0px -78px;
}
#project-nav li#prev a:hover{
	background-position: 0px -52px;
}

#project-wrap{
	margin: 0 auto;
	position: relative;
	width: 660px;
}
#project-wrap h2{
	color: #B4563A;
	font: normal normal 20px "Century Gothic", Sans-Serif;
	margin-bottom: 10px;
}
.project-img{
	float: left;
	position: absolute;
	width: 320px;
	z-index: 20;
}

.project-details{
	float: right;
	width: 320px;
}
.project-details p{
	line-height: 20px
}
.project-details ul{
	margin-bottom: 10px;
}
.project-details ul li{
	line-height: 20px;
	margin-bottom: 5px;
}
span.htext{
	color: #B4563A;
	font-weight: bold;
}
.project-details a{
	color: #7E6B71;
}
.project-details a:hover{
	color: #333;
	text-decoration: none;
}
.project-details h3{
	border-bottom: 1px solid #C4D8CD;
	clear: both;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

/*----------------Features (Home & Work)
---------------------------------------*/
.feature-row{
	clear: both;
	margin: 0 auto;
	width: 660px;
}
.feature{
	float: left;
	margin-right: 15px;
	width: 210px;
}
	.feature.last{
		margin-right: 0;
	}
.feature a img{
	background-color: #FFF;
	border: solid 4px #7E6B71;
	display: block;
	height: 100px;
	padding: 1px;
	width: 200px;
}
.feature a img:hover{
	border: solid 4px #B4563A;
}
.feature h3 a{
	background: transparent url(../images/site/feature_h3_bg.png) no-repeat center bottom;
	color: #B4563A;
	display: block;
	font: normal bold 12px "Century Gothic", Sans-Serif;
	margin: 8px 0;
	padding-bottom: 8px;
	text-decoration: none;
}
.feature h3 a:hover{}
.feature p{
	background: transparent url(../images/site/feature_h3_bg.png) no-repeat center bottom;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 10px;
}
.feature ul{
	background-color: #C4D8CD;
	margin-bottom: 40px;
	width: 210px;
}
.feature-row .feature ul{
	margin-bottom: 20px;
}
.feature ul li{
	float: right;
}
.feature ul li a{
	border-left: solid 1px #FFF;
	color: #FFF;
	float: left;
	font-size: 11px;
	display: block;
	line-height: 12px;
	padding: 3px;
	text-decoration: none;
}
.feature ul li.live a{
	background-color: #B4563A;
}
	.feature ul li.live a:hover{
		background-color: #85402C;
	}
.feature ul li.details a{
	background-color: #F9A11C;
}
	.feature ul li.details a:hover{
		background-color: #B07113;
	}

/*----------------Footer
---------------------------------------*/
#footer{
	clear: both;
	margin-left: 200px;
	padding-left: 100px;
	border-top: 1px solid #C4D8CD;
	background: url(../images/site/bg_footer_logo.png) no-repeat scroll 20px center;
}
#footer ul{
	padding-top: 10px;
	padding-bottom: 10px;
}
#footer ul li{
	font: 11px/16px Arial, Helvetica, sans-serif;
	color: #7E6B71;
}

#tooltip{
	position:absolute;
	border:1px solid #7E6B71;
	background:#FFF;
	padding:2px 5px;
	display:none;
	z-index: 30;
	}