@media screen,projection  {
	
	html {
		background: #545454 url(/images/bg-gradient.png) repeat-x 0 100%;
	}
	body {
		padding: 0;
		margin: 0;
		font: normal 12px 'Lucida Grande', sans-serif;
		text-align: center;
	}
	a {
		text-decoration: none;
	}
		a img {
			border: none;
		}
	h1, h2, h3, h4, h5, h6 {
		padding: 0;
		margin: 0;
	}
	h1 {
		position: absolute;
		left: 0;
		top: 30px;
		width: 204px;
		height: 41px;
		margin: 0;
		font: lighter 26px/1 AvantGarde, 'Helvetica Neue', Helvetica, Arial, sans-serif;
		overflow: hidden;
	}
		h1 a {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
		}
		h1 a span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url(/images/logo.png) no-repeat 0 0;
			z-index: 10;
		}
	h2 {
		color: #cece98;
		font: bold 22px/1 'Helvetica Condensed', 'Arial Narrow', Helvetica, sans-serif;
		text-transform: uppercase;
	}
		h2 span,
		h2 span a {
			color: #f90;
		}
	nav {
		display: block;
	}
	p, ul, ol, blockquote, dl {
		line-height: 2em;
		}
	p {
		padding: 0 0 1em;
		margin: 0;
	}
	q:lang(en) {
		quotes: "“" "”" "‘" "’";
	}
	ul {
		padding: 0;
		margin: 0;
	}
	ul li, ol li, dl dd {
		padding-bottom: 7px;
	}
	.help {
		cursor: help;
	}
	.tel {
		white-space: nowrap;
	}
	#container {
		position: relative;
		background: #fff;
		overflow: hidden;
	}
	header {
		position: relative;
		display: block;
		width: 498px;
		height: 97px;
		padding: 0 0 0 410px;
		margin: 0 auto;
		background: #fff;
		text-align: left;
	}
	#mainnav {
		padding: 0;
		background: #fff;
		overflow: hidden;
		list-style-type: none;
	}
	#mainnav li {
		position: relative;
		height: 97px;
		padding: 0;
		margin: 0;
		background: #fff;
		float: left;
	}
		#mainnav :hover span,
		.who #who span,
		.what #what span,
		.why #why span,
		.contact #contact span { text-indent: 0;	}
		#mainnav span {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 27px;
			padding-top: 70px;
			background-image: url(/images/nav-sprite.jpg);
			background-repeat: no-repeat;
			text-indent: -200em;
		}
		#who { width: 102px;}
			#who span { background-position: 0 0; }
			.who #who span,
			#who :hover span { background-position: 0 -97px; }
		#why { width: 138px; }
			#why span { background-position: -102px 0; }
			.why #why span,
			#why :hover span { background-position: -102px -97px; }
		#what { width: 133px; }
			#what span { background-position: -240px 0; }
			.what #what span,
			#what :hover span { background-position: -240px -97px; }
		#contact { width: 110px; }
			#contact span { background-position: -374px 0; }
			.contact #contact span,
			#contact :hover span { background-position: -374px -97px; }
		#mainnav a {
			position: absolute;
			top: 0;
			display: block;
			width: 100%;
			height: 27px;
			padding-top: 70px;
			color: #92928e;
			font: normal 15px/1 sans-serif;
			overflow: hidden;
		}

	footer {
		display: block;
		width: 907px;
		padding: 3em 0 3em;
		margin: 0 auto;
		color: #ccc;
		text-shadow: 0 0 0 #000;
		font: lighter 14px/1 'HelveticaNeue-CondensedBold', 'Helvetica Neue Bold Condensed','Helvetica Neue', 'ArialNarrow-Bold', 'Arial Narrow', Arial, sans-serif;
		font-stretch: condensed;
		text-align: left;
		overflow: hidden;
	}
		footer a {
			color: #ff9900;
		}
			footer a:hover {
				border-bottom: none;
				text-decoration: underline;
			}
		footer h2 {
			padding: 0 0 .5em;
			color: #e2e3bb;
			font: normal 25px/28px Helvetica, Arial, sans-serif;
		}
		footer form {
			float: left;
			width: 320px;
			padding: 0 50px 25px 0;
		}
		footer input {
			display: inline-block;
			width: 204px;
			margin: 0;
		}
		footer input[type=submit] {
			width: auto;
		}
		footer label {
			display: inline-block;
			width: 110px;
		}
			footer label span {
				display: inline;
				color: #999;
				font-size: smaller;
				font-weight: normal;
			}
		footer textarea {
			width: 318px;
			resize: vertical;
		}
		footer ul {
			list-style-type: none;
		}
		footer .adr {
			display: block;
		}
		footer .fn {
			display: none;
		}
	#contactinfo {
		width: 490px;
	}
		#contactinfo a {
			display: block;
			overflow: hidden;
		}
		#contactinfo .map {
			float: left;
			width: 300px;
			height: 150px;
			margin: 0 25px 1em 0;
			background: url("http://maps.google.com/maps/api/staticmap?center=31+E+8th+St,+Holland,+MI+49423&zoom=14&size=300x150&maptype=roadmap&markers=color:red|color:red|label:A|42.79045000,-86.105797&sensor=false&key=MAPS_API_KEY") no-repeat 0 0;	
		}
	#findus {
		float: left;
		width: 450px;
		padding: 0 0 0 25px;
	}
		#findus nav {
		}
	#socialmedia {
		clear: left;
	}
	#socialmedia a {
		display: block;
		height: 32px;
		padding: 0 0 0 40px;
		background-repeat: no-repeat;
		background-image: url(/images/icons/sprite-social-media.png);
		line-height: 32px;
	}
	#socialmedia li {
		float: left;
		padding: 0 30px 0 0;
	}
		#flickr { background-position: 0 0; }
		#twitter { background-position: 0 -40px; }
		#vimeo { background-position: 0 -80px; }

}

@media handheld {
	body {
		padding: 0;
		margin: 0;
		color: #666;
		font: normal 1em sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		font-weight: normal;
	}
	h1, h1 a {
		color: #999;
	}
	blockquote {
		font-size: 20px;
		text-transform: uppercase;
	}
	ul {
		padding: 0 0 0 10px;
		margin: 0;
	}
	ul li {
		padding: 0;
		margin: 0;
	}
	.details {
		padding: 11px;
		color: #fff;
		background: #202020;
		font: normal 1em serif
	}
	.details a {
		color: #fff;
	}
	.details h2 {
		font-family: sans-serif;
	}
	.details h2 .family-name {
		color: #f90;
		font-weight: lighter;
	}
	.details ul {
		padding: 0;
	}
	.details li {
		padding: 2px 0;
		list-style-type: none;
	}
	.details .adr {
		display: none;
		visibility: hidden;
	}
	.sidenav {
		text-transform: uppercase;
	}
	.sidenav a {
		padding: 0 2px;
		color: #F90;
	}
	.sidenav h2,
	.sidenav h3 {
		color: #093;
		font-weight: bold;
	}
	.sidenav li {
		list-style-type: none;
	}
	#container {
		padding: 5px;
	}
	#mainnav a {
		color: #666;
		font-size: 1.4em;
	}
	#bionav {
		display: none;
		visibility: hidden;
	}
	#footer {
		padding: 5px;
		color: #ccc;
		background: #333;
		text-align: center;
	}
	#footer a {
		color: #f90;
	}
	#footer .adr {
		display: block;
	}
	#footer .tel {
		white-space: nowrap;
	}
}
@media print {
	#mainnav {
		display: none;
	}
}
@media only screen and (max-device-width: 480px) {
	body {
		width: auto;
		max-width: 480px;
		min-width: 240px;
	}
	body h1 {
		left: 10px;
	}
	body h2.image a span {
		background: none;
	}
	body #contactinfo .map {
		display: none;
		background: none;
	}
	body header {
		width: 100%;
		height: auto;
		min-height: 97px;
		max-height: 194px;
		padding: 97px 0 0 0;
		overflow: hidden;
	}
	body #mainnav {
		position: relative;
		left: 10px;
	}
	body ul#mainnav li#contact {
		width: 97px;
	}
	body #content {
		padding: 15px 10px 15px;
		clear: both;
		overflow: hidden;
	}
	body #bionav {
		display: none;
		visibility: hidden;
	}
	body #container #maincontent {
		width: auto;
		padding: 15px 10px;
		background: #fff none no-repeat 0 0;
		overflow: hidden;
	}
	body #maincontent .content {
		width: auto;
		float: none;
	}
	body #maincontent .content .feature,
	body #maincontent .content #extras,
	body #maincontent #extras {
		position: relative;
		width: auto;
		padding:10px 0;
		margin: 0;
		line-height: 1.5;
		float: none;
	}
	body #maincontent .content blockquote {
		width: auto;
		float: none;
	}
		body #maincontent .content blockquote p {
			font-style: italic;
		}
	body footer {
		width: auto;
	}
	body .details {
		position: relative;
		width: 80%;
		max-width: 460px;
		padding: 10px 10%;
		background-color: #333;
	}
	body .details img {
		display: none;
		visibility: hidden;
	}
	body .person .details .vcard {
		width: 90%;
		padding: 0;
	}
	body .sidenav {
		position: relative;
		width: 100%;
		padding: 0;
		background: transparent;
		float: none;
	}
	body .sidenav h2 {
		width: auto;
		height: auto;
	}
	body .sidenav ul {
		background: transparent;
	}
	body.market .portal {
		width: auto;
		height: auto;
		padding: 0;
		background: #5A7DA5;
	}
		body.market .portal h2, 
		body.market .portal h3 {
			position: relative;
			left: 0;
			padding: 5px 10px;
		}
		body.market .portal .feature,
		body.market .portal #studies {
			position: relative;
			left: 0;
			top: 0;
			width: auto;
			padding: .5em 10px;
		}
	body.what .portal {
		width: auto;
	}
	body.what .portal h2 {
		width: auto;
		float: none;
	}
	body.what .portal ul.portfolio {
		width: auto;
		height: auto;
	}
		body.what .portal ul.portfolio li {
			margin-bottom: 8px;
		}

	body.casestudy h2 {
		background-position: -20px;
	}
	body.casestudy .quote {
		width: auto;
		float: none;
	}
	body.casestudy .shadowbox {
		width: auto;
		padding: 0;
		background: transparent;
	}
		body.casestudy .shadowbox .caption {
			left: 0;
		}
	body.casestudy #maincontent,
	body.casestudy #maincontent .content,
	body.casestudy #description,
	body.casestudy #preview {
		width: auto;
		float: none;
	}
	div.person #content,
	div.person #content .vcard {
		background: #333;
	}
	body .person .vcard .download {
		display: block;
		visibility: visible;
		padding: .5em 0;
	}

}