@import url(http://fonts.googleapis.com/css?family=Nobile&subset=latin);
@media screen {
	body {
		margin:0;
		padding: 0;
		font: normal normal 14px/160% Georgia, "Times New Roman", serif;
		color: #666;
		background: #fffffc;
		min-width: 960px;
		min-height: 100%;
	}
	a {
		color: #256985;
	}
	article, aside, figure, footer, header, hgroup, menu, nav, section { 
		display: block; 
	}

	html, body, #container {
		position: relative;
		overflow: auto;
	}

	#header-content, #content {
		width: 940px;
		margin: 0 auto;
		text-align: left;
	}
	header {
		width: 100%;
		height: 86px;
		background: #ddddd5;
		position: relative;
		z-index: 10;
	}
	#header-content {
		position: relative;
		height: 86px;
	}
	header h1 {
		position: absolute;
		top: 60px;
		left: 140px;
		font-style: italic;
		font-size: 14px;
		margin: 0;
		font-weight: normal;
		text-transform: lowercase;
	}
	.logo {
		display: block;
		width: 117px;
		height: 117px;
		position: absolute;
		top: -50px; 
		left: -140px;
		background: transparent url(../images/cjb.png) 0 0 no-repeat;
		text-indent: -9999px;
		float: left;
	}
	.name {
		font-weight: bold;
		text-transform: capitalize;
		padding-left: 2px;
		text-shadow:1px 1px 0 #fff;
	}
	#primarynav ul {
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0;
		padding: 0 15px;
		list-style-type: none;
		width: 240px;
		height: 30px;
		background: #758161;
		background: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(0.80, rgb(117,129,97)),
		    color-stop(1, rgb(93,102,78))
		);
		background: -moz-linear-gradient(
		    center bottom,
		    rgb(117,129,97) 80%,
		    rgb(93,102,78) 100%
		);
	
	}
	#primarynav li {
		display: block; 
		position: relative;
		float: left; 
		height: 30px; 
		line-height: 30px;
		width: 80px;
		text-align: center;
		text-transform: lowercase;
		font-style: italic;
	}
	#primarynav a {color: #fff; text-decoration: none;}
	#primarynav li.selected {
		background: transparent url(../images/banner.png) bottom center no-repeat;
		padding: 4px 0 33px;
		margin-top: -7px;
	}	
	#primarynav li.selected a {
		color: #666;
	}
	#primarynav .corner {
		display: block;
		position: absolute;
		top: 0;
		right: -6px;
		width: 0;
		height: 0;
		border-bottom: 7px solid #B9BFAD;
		border-right: 7px solid #ddddd5;
	}
	#content {
		width: 760px;
		margin: 0 auto;
		padding: 60px 90px 30px;
		overflow: auto;
	}
	#content h2 {
		font: normal normal 32px/140% 'Nobile', Lucida Grande, sans-serif;
		margin: 0 0 .5em 0;
	}
	#content h3 {
		margin: 1em 0;
	}

	/* Home styles */

	img.portrait {
		float: right;
		margin: 68px 4px 20px 30px;
		border: 8px solid #fff;
		-moz-box-shadow: 0 0 4px #ccc;
		-webkit-box-shadow: 0 0 4px #ccc;
		box-shadow: 0 0 4px #ccc;	
	}
	body.home #content h2+p {
		margin: 0 0 22px;
		padding: 0 0 0 20px;
		font: italic normal 20px/160% Georgia, "Times New Roman", serif;
		color: #808080;
		border-left: 10px solid #ddddd5;
	}
	body.home #content h3 {
		margin-top: 2em;
	}

	/* Portfolio styles */
	body.portfolio #content {
		width: 760px;
		height: 598px;
		overflow: hidden;
	}
	.projectWindow {
		width: 1550px;
		position: relative;
		left: -90px;
	}

	#projectThumbs {
		overflow: auto;
		width: 760px;
		padding: 0 90px;
	}
	#projectThumbs .project {
		position: relative;
		width: 240px;
		height: 159px;
		margin: 0 20px 20px 0;
		float: left;
		/*background: transparent url(../images/thumb-bg.png) 0 0 no-repeat;*/
	}
	#projectThumbs .project a {
		position: absolute;
		top: 8px;
		left: 8px;
		border: 0;
		display: block;
		width: 210px;
		height: 129px;
		border: 7px solid #fff;
		background: #000; /* old browsers */
/*		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.06) inset;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 0, 0, 0.1) inset;
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.06) inset; }*/
	}
	
	#projectThumbs .project:after {
		z-index: -1;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		right: 16px;
		bottom: 16px;
		transform: skew(3deg) rotate(1deg);
		-webkit-transform: skew(3deg) rotate(1deg);
		-moz-transform: skew(3deg) rotate(1deg);
		box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.4);
	}

	#projectThumbs .project:before {
		z-index: -2;
		position: absolute;
		background: transparent;
		width: 70%;
		height: 55%;
		content: '';
		left: 16px;
		top: 16px;
		transform: skew(3deg) rotate(1deg);
		-webkit-transform: skew(3deg) rotate(1deg);
		-moz-transform: skew(3deg) rotate(1deg);
		box-shadow: -8px -8px 6px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: -8px -8px 6px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: -8px -8px 6px rgba(0, 0, 0, 0.4);
	}
	
	#projectThumbs .eol {
		margin-right: 0;
	}
	#projectThumbs .project img {
		width: 210px;
		height: 129px;
		float: left;
		border: 0;
	}
	
	#projectThumbs .project a {
		text-decoration: none;
	}
	#projectThumbs .project .projTitle {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 194px;
		padding: 8px;
		font: italic normal 12px/14px Georgia, "Times new Roman", serif;
		color: #fff;
		text-align: right;
		display: none;
		background: #000;
		background: rgba(0,0,0,.7);
	}

	#detailsWindow {
		position: absolute;
		top: 0;
		left: 940px;
		width: 760px;
		height: 595px;
		overflow:hidden;
	}

	#projectDetails {
		position: relative;
		width: 7200px;
		overflow: auto;
	}
	#projectDetails .project {
		position: relative;
		float: left;
		width: 340px;
		height: 500px;
		margin: 0 40px 40px 0;
		padding: 0 420px 0 0;
		font-size: 12px;
		line-height: 160%;
	}
	#projectDetails h3 {
		font: normal normal 32px/140% 'Nobile', Lucida Grande, sans-serif;
		margin: 0 0 1em;
		width: 760px;
	}
	#projectDetails .role {
		font-size: 130%;
	}
	#projectDetails .role .title {
		font-style: italic;
	}
	#projectDetails .url {
		position: absolute;
		top: 410px;
		right: 0;
		width: 390px;
		font-size: 110%;
		text-align: center;
	}
	#projectDetails .url a {
		margin-left: 2px;
	}

	#projectDetails .uscmobile .url {
		top: 350px;
		width: 360px;
	}
	#projectDetails .monitor {
		position: absolute;
		top: 80px;
		right: 0;
		width: 390px;
		height: 331px;
		margin: 0 0 0 30px;
		background: transparent url(../images/monitor.png) 0 0 no-repeat;
	}
	#projectDetails .monitor.hide {
		background-image: none;
	}
	#projectDetails .monitor img {
		position: relative;
		top: 23px;
		left: 17px;
	}
	.back {
		position: absolute;
		top: 4px;
		right: 0;
		font: italic normal 14px/30px Georgia, "Times New Roman", serif;
		text-decoration: none;
	}
	.projectNav {
		width: auto;
		height: 24px;
		margin-top: 30px;
		border-top: 1px dotted #ccc;
		font: italic normal 12px/24px Georgia, "Times New Roman", serif;
		text-transform: lowercase;
		text-align: center;
	}
	.projectNav a {
		text-decoration: none;
	}
	.projectNav .prev {
		float: left;
	}
	.projectNav .next {
		float: right;
	}
	.projectNav .all {
		padding-left: 13px;
		background: transparent url(../images/grid.png) 0 4px no-repeat;
	}

	/* Resume styles */
	body.resume #content {
		padding: 40px 90px 30px;
		width: 760px;
	}
	#resume {
		margin: 30px 0 0;
		background: #fff;
		border: 1px solid #ccc;
		padding: 30px;
		-moz-box-shadow: 1px 1px 4px #ccc;
		-webkit-box-shadow: 1px 1px 4px #ccc;
		box-shadow: 1px 1px 4px #ccc;
	}
	#resume .location {
		font-style: italic;
	}
	.vcard {
		margin: 0;
		padding: 0;
		position: relative;
	}
	#content .vcard h2.fn {
		margin: 0;
		padding: 0;
		font: normal normal 40px/40px 'Nobile', Lucida Grande, sans-serif;
		letter-spacing: -1px;
		background: transparent;
		border: 0;
	}
	.given-name {
		color: #999;
	}
	.family-name {
		color: #666;
	}
	.vcard ul {
		position: absolute;
		top: 20px;
		right: 0;
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: right;
	}
	.vcard li {
		display: inline;
		margin: 0 0 0 12px;
		border-left: 1px solid #ccc;
		padding: 0 0 0 12px;
		font-style: italic;
		text-transform: lowercase;
	}
	.vcard li:first-child {
		border: 0;
	}
	.vcard li a {
		text-decoration: none;
	}


	#resume h3 {
		border-bottom: 1px solid #ccc;
		margin: 30px 0;
		font: italic bold 16px/100% Georgia, "Times New Roman", serif;
		font: normal normal 22px/30px 'Nobile', Lucida Grande, sans-serif;
		color: #666;
	}
	.skills {
		overflow: auto;
	}
	.skills .set {
		width: 33%;
		float: left;
		font-size: 12px;
	}
	.set h4 {
		font: normal bold 12px/100% Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		margin: 0 0 12px;
	}
	.set ul {
		margin: 0;
		padding: 0 0 0 15px;
	}
	.education .school, .experience .job {
		clear: both;
		overflow: auto;
		margin: 0 0 30px;
	}
	.education .schoolName, .education .location, .education .dates,
	.experience .institution, .experience .location, .experience .dates, .experience .title {
		float: left;
		clear: left;
		width: 250px;
	}
	.education .schoolName, .experience .institution {
		font: normal bold 12px/160% Helvetica, Arial, sans-serif;
		text-transform: uppercase;
		color: #444;
	}
	.experience .location, .experience .dates, .experience .title,
	.education .location, .education .dates, .education .title {
		color: #888;
	}
	.education p, .experience p {
		margin: 0 0 1em 270px;
		line-height: 140%;
	}
	.speaking ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.speaking li {
		margin-bottom: 15px;
	}
	.speaking .title {
		font-weight: bold;
	}
	.speaking .location, .speaking .date {
		display: inline;
	}
	.speaking .location {
		padding: 0 12px 0 0;
		margin: 0 12px 0 0;
		border-right: 1px solid #ccc;
	}

	/* Contact styles */
	#contactForm label {
		display: inline-block;
		position: absolute;
		left: 10px; 
		top: 10px;
		cursor: text;
		float: left;
	}
	#contactForm input {
		width: 280px;
		height: 34px;
		background: transparent url(../images/input-bg.png) 0 0 repeat;
		border: 0;
		font: normal normal 14px/34px Georgia, "Times New Roman", serif;
		padding: 3px 10px 0;
	}

	#contactForm div.input {
		width: 280px;
		float: left;
		margin-bottom: 8px;
		position: relative;
	}
	#contactForm div.textarea {
		float: left;
		margin: 0 30px 0 0;
		position: relative;
	}
	#contactForm textarea {
		font: normal normal 14px/34px Georgia, "Times New Roman", serif;
		width: 430px; 
		height: 270px;
		background: transparent url(../images/input-bg.png) 0 0 repeat;
		border: 0;
		padding: 3px 10px 0;
	}
	#contactForm .hidden {
		display: none;
	}
	.col {
		width: 365px;
		padding: 0 15px 0 0;
		float: left;
		margin-bottom: 20px;
	}
	.col + .col {
		padding: 0 0 0 15px;
	}


	footer {
		clear: both;
		position: relative;
		width: auto;
		height: 130px;
		background: #fefefa url(../images/footer-bg.jpg) bottom center repeat-x;
	}
	#footer-content {
		position: relative;
		width: 940px;
		height: 80px;
		margin: 0 auto;
		padding: 25px 0;
	}
	.social {
		position: absolute;
		top: 20px;
		right: 0;
		width: 267px;
	}
	.social h3 {
		margin: 0 0 8px;
		font-size: 12px;
		font-weight: normal;
		text-transform: uppercase;
	}
	.social ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.social li {
		display: block;
		float: left;
		width: 48px;
		height: 48px;
		margin-left: 25px;
	}
	.social a {
		display: block;
		width: 48px;
		height: 48px;
		background: transparent url(../images/social.png) -48px 0 no-repeat;
		text-indent: -9999px;
	}
	.social a:hover {
		background-position: 0 0;
	}
	.social a.twitter {
		background-position: -48px -48px;
	}
	.social a.twitter:hover {
		background-position: 0 -48px;
	}
	.social a.flickr {
		background-position: -48px -96px;
	}
	.social a.flickr:hover {
		background-position: 0 -96px;
	}
	.social a.linkdin {
		background-position: -48px -144px;
	}
	.social a.linkdin:hover {
		background-position: 0 -144px;
	}
	.social li:first-child {
		margin-left: 0;
	}
	footer a.top {
		display: block;
		float: left;
		height: 23px;
		padding: 0 0 0 30px;
		font: italic normal 16px/23px Georgia, serif;
		background: transparent url(../images/backtop.png) 0 0 no-repeat;
		color: #768262;
		text-decoration: none;
	}
	footer a.top:hover {
		text-decoration: underline;
		color: #48503c;
		background-position: 0 -23px;
	}
	footer p {
		clear: both;
		margin: 0;
		padding: 14px 0;
		color: #666;
		font-size: 12px;
	}
	footer p .copyright {
		display: block;
		font-size: 14px;
		font-style: italic;
	}
	.clear {
		clear: both;
	}
	.floatRight {
		float: right;
	}
}