body {
	background: #fff;
	margin: 0px auto;}
	
#wrapper-home { 
	width: 900px;
	padding: 18px 0px;
	margin: 0px auto;}
	
#wrapper { 
	width: 900px;
	padding: 0px;
	margin: 0px auto;}	
		
	
#logo {
	display:block;
	height: 169px;
	width: 617px;
	background-image: url(../images/logo.png);
	text-indent: -9999px;
	margin: 40px auto 30px auto;}

	#logo:hover {
		background-position: -617px;}
	
#navigation {
	height: 50px;
	margin: 0;
	list-style-type: none;
	background-color: #000;
	color: #FFF;
	width: 100%;
	font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	text-align: center;}

	#navigation li { display: inline;
		position: relative;
		top: 13px; }
	
	#navigation li a {
		text-decoration: none;
		color: #FFF;
		padding: 15px 25px;}
	
	#navigation li a:hover {
		background-color: #666;
		color: #000;
		text-decoration: underline;
		background-color: #fff;}
		
	#navigation .active {
		background-color: #fff;	
		padding: 15px 25px;
		color: #f00;}
	
h1.section {
	color: #dcd9d8;
	font: italic 36pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	padding-left: 18px;
	letter-spacing: -.6pt;}

.box {
	background: url(../images/inset.png) no-repeat;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	margin: 0px 18px;
	margin-bottom: 36px;}
	
#project {
	width: 336px;
	color: #fff;}
		
	#project p.link {
		background-color: #000;
		padding: 10px;
		text-align: right;
		font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;}
		
	#project.hover p.link, #project p.link:hover {
		background-color: #111;
		text-decoration: underline;}
		
	#project p.link a {
		color: #fff;
		text-decoration: none;}
		
	#project > img {
		float: left;}	
		
#contact {
	background-color: #3b9da7;
	color: #fff;
	width: 300px;
	margin-top: 0px;}
	
	#contact.left{margin-left:54px;}
	#contact.right{margin-right:210px;}
	
	#contact.hover, #contact:hover { background-color: #2d8b95;}
	
	#contact p.email, #contact p.phone {
		padding: 40px;
		font-weight: 100;
		letter-spacing: .5pt;
		font-size: 12pt;
		line-height: 18pt;}
		
		#contact p.email{
			padding-bottom: 20px;
			padding-top: 30px;}
			
		#contact p.email a{
			color: #fff;
			text-decoration: none;}
			
		#contact p.email a:hover{
			color: #fff;
			text-decoration: underline;}
		
		#contact p.phone{
			padding-top: 0px;}
	
	#contact p.email strong, #contact p.phone strong {
		font-weight: bold;}
		
	#contact p.link {
		background-color: #2d7981;
		padding: 10px;
		text-align: right;
		font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;}
		
	#contact.hover p.link, #contact p.link:hover {
		background-color: #22676f;
		text-decoration: underline;}
		
	#contact p.link a {
		color: #fff;
		text-decoration: none;}
	
		
#mission {
	background-color: #dfb025;
	color: #fff;
	width: 492px;}

	
	#mission.hover, #mission:hover { background-color: #d9a51f;}
	
	#mission p.statement {
		padding: 40px;
		padding-top: 30px;
		font-weight: 100;
		letter-spacing: .5pt;
		font-size: 18pt;
		line-height: 32px;}
	
	#mission p.statement strong {
		font-weight: bold;}
		
	#mission p.link {
		background-color: #ce8f12;
		padding: 10px;
		text-align: right;
		font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;}
		
	#mission.hover p.link, #mission p.link:hover {
		background-color: #c6820f;
		text-decoration: underline;}
		
	#mission p.link a {
		color: #fff;
		text-decoration: none;}
		
#blog {
	background-color: #eae9e7;
	width: 300px;}
	
	#blog.left{margin-left:54px;}
	#blog.right{margin-right:210px;}

	#blog.hover, #blog:hover { background-color: #e2e1de;}

	#blog p.date {
		padding: 30px 0 0 30px;
		font-size: 8pt;
		color: #999;
		line-height: 18pt;
		text-transform: uppercase;}
		
	#blog h1 {
		padding: 0 30px 10px;
		font: italic 20pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif; }
		
	#blog h1 a, #blog h1 a:visited {
		text-decoration: none;
		color: #000; }	
			
	#blog p.excerpt {
		padding: 0 30px 30px;
		letter-spacing: .5pt;
		font-size: 9pt;
		color: #555;
		line-height: 14pt;}
		
		#blog p.excerpt a {
			font: italic 12pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;
			text-decoration: none;}
		
		#blog p.excerpt a:hover {
			text-decoration: underline;}
			
	#blog p.image{
		margin: 0px auto;
		text-align: center;
		padding-bottom: 40px;}
			
	#blog p.link {
		background-color: #d7d5d1;
		padding: 10px;
		text-align: right;
		font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;}
		
	#blog.hover p.link, #blog p.link:hover {
		background-color: #d0cec9;
		text-decoration: underline;}
		
	#blog p.link a {
		color: #000;
		text-decoration: none;}
	
.left {float: left; clear:left;}
.right {float: right;clear:right;}















	
#categories {
	margin: 0;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	list-style-type: none;
	color: #333;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;}

	#categories li { 
		display: inline;
		border-right: 1px solid #ccc;}
	
	#categories li a {
		text-decoration: none;
		color: #333;
		padding: 0px 18px;
		padding: 15px;} /*controls spacing of list of buttons*/
	
	#categories li a:hover {
		background-color: #666;
		color: #000;
		text-decoration: underline;
		background-color: #fff;}
		
	#categories .active {
		font-weight: bold;
		color: #f00;}
		

.thumbnail {
	background-color: #000;
	width: 188px;
	height: 306px;
	margin: 18px;
	float: left;}	
	
	.thumbnail .visited {
		/* for IE */
		filter: alpha(opacity=100);
		/* CSS3 standard */
		opacity: 1.0;}
		
	.thumbnail img{
		position: absolute; /*needed to fix jump bug*/
		float: left;}
	
	.thumbnail .description {
		background-image: url(../images/red-overlay.png);
		position: relative;
		height: 306px; /*add top -306 to troubleshoot jump bug*/
		color: #fff;
		display: none;}
		
		.thumbnail .description h1{
			padding: 15px;
			padding-bottom: 5px;
			font: bold 14pt Helvetica Neue, Helvetica, Arial, sans-serif;}
			
		.thumbnail .description h1 a{
			color: #fff;
			text-decoration: underline;}
			
		.thumbnail .description h2{
			padding: 0px 15px;
			font: normal 9pt Helvetica Neue, Helvetica, Arial, sans-serif;}
	
		.thumbnail .description h3{
			padding: 10px 15px;
			font: normal 9pt Helvetica Neue, Helvetica, Arial, sans-serif;}
			
		.thumbnail .description h3 a{
			color: #fff;
			text-decoration: none;}
		
#next  {
	display:block;
	height: 32px;
	width: 27px;
	position: relative;
	left: 900px;
	top: -7px;}
	
#previous{
	display:block;
	height: 32px;
	width: 27px;
	position: relative;
	right: 36px;
	top: -39px;}
		
	#next a, #previous a {
		color: black;
		font-size: 25pt;
		text-decoration: none;}
		
	#next a:hover, #previous a:hover {
		color: #f00}
		
#details {
	position: relative;
	top: -75px;}
	
	#details img {
		padding: 18px;
		padding-top: 0px;
		padding-bottom: 36px;}
		
	#details .description{
		padding: 18px;
		padding-left: 0px;
		padding-top: 0px;
		width: 292px;
		float: right;}
		
	#details .description h2{
		font: bold 14pt Helvetica Neue, Helvetica, Arial, sans-serif;
		padding-bottom: 5px;}
		
	#details .description h3{
		color: #999;
		font: normal 8pt Helvetica Neue, Helvetica, Arial, sans-serif;}
		
	#details .description p{
		color: #333;
		padding-top: 30px;
		font: normal 10pt Helvetica Neue, Helvetica, Arial, sans-serif;
		line-height: 15pt;}
	
	
#bio p{
	color: #333;
	padding-top: 18px;
	font: normal 14pt Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 200;
	line-height: 21pt; 
	padding-left: 18px;}
	
	#bio p img {
		float: right;
		padding-left: 60px;
		margin-top: -20px;}
		
#contacts p#email, #contacts p#phone, #contacts #form label{
	color: #333;
	padding-top: 18px;
	font: normal 14pt Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 200;
	line-height: 21pt; 
	padding-left: 18px;}
	
	#contacts p#email a{
		color: #333;
		text-decoration: none;}
	
		#contacts p#email a:hover {
			text-decoration: underline;}
	
	#contacts img {
		float: right;}

	#contacts #form {
		background-color: #ddd;
		width: 410px;
		margin: 18px;}
		
		#contacts #form p{
			color: #333;
			padding-top: 20px;
			font: normal 11pt Helvetica Neue, Helvetica, Arial, sans-serif;
			font-weight: 200;
			line-height: 21pt; 
			padding-left: 20px;
			text-align: center;}
			
		#contacts strong {
			font-weight: bold;}
				
		#contacts #form label {
			width: 50px;
			padding-left: 0px;}
					
		input#name, input#email, #contacts #form textarea {
			width: 270px;
			padding: 2px;}
			
		#contacts #form textarea {
			width: 273px;
			height: 200px;
			padding: 2px;}
			
		#contacts #form .submit-button {
			background-color: #000;
			float: right;
			text-align: right;
			border: 1px solid #FFF;
			color: #fff;
			font: italic 16pt Adobe Garamond Pro, Garamond, Palatino, Palatino Linotype, Times, Times New Roman, serif;
			margin-top:10px;
			padding: 10px;
			margin-bottom: 20px;}
		
		#contacts #form table {
			margin: 0px auto;}
		
			#contacts #form table td {
				vertical-align: top;
				padding: 5px;
				padding-left: 0px;}
				
				p.special {display:none;}
				
				#contacts #form .message{
					display: none;
					background-color: #FF9;		
					font: normal 12px Helvetica Neue, Helvetica, Arial, sans-serif;
					padding: 20px;
					color: #333;}
	
p#footer {
	width: 100%;
	background-color: #000;
	clear: both;
	padding: 20px 0px;
	border-top: 50px solid white;
	color: #ccc;
	text-align: center;
	font: normal 9pt Helvetica Neue, Helvetica, Arial, sans-serif;}	
	
	p#footer a{
		color: #fff;
		text-decoration: none;}
		
	p#footer a:hover{
		text-decoration: underline;}
		
	
/* tells jquery.biggerlink to change the cursor from an arrow to a hand for links */
.hover { cursor: pointer;}

.thumbnail .description h1 a:visited {
	color: red;}