html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

ol, ul {
  list-style: none;
}
a img {
  border: none;
}

/*
@font-face {
  font-family: DIN;
  src: url(../fonts/DINPro-Regular.otf)  format("opentype");
}
*/

body {
	font-family: Lucida Sans, sans-serif;
    font-size: 18px;

	background-color:#d0d0d0;	/* Temp - so i can see it on my old mac */
	background-color:#f5f2e7;
	background-color:#505050;
	
    color: #202020;
  }

.dontDisplay {
	display:none;
}

.contentBand {
	max-width:1080px;	/* 4 x (250 + 20) (margin)  */
	margin:0 auto;
	
	width:90%;
}

.app {
}

.topNavBand {
    display:none;
	padding:.25em 0 .25em 0;

}

.topNav {
	text-align:right;
}

.navItems {
	margin-right:10px;
	font-size:.75em;
}

.navItem {
	padding:.25em 2em .4em 2em;
}

.navItemSelected {
	background-color:#ffffff;
}

.appHeaderBand {
	padding:1.5em 0;
	background-color:#ffffff;
}


.appHeader {
	white-space:nowrap;
}

.appHeader:after {
	content:".";
	display:block;
	height: 0;
	clear:both;
	visibility:hidden;
}

.logo {
	margin-left:0.925926%;		/* 10 / 1080 */
	
	float:left;
	width:192px;
	height:29px;
	
	background-image:url(../images/logo.png);
	
	cursor: pointer;	
}

.categories {
	margin-left:5.5em;
	font-size:.75em;
	
}

.categoryNavItem {
	text-transform:lowercase;
		
	padding:.125em .5em .25em .5em;
	
	margin:0 .5em;
	
	color:#96790f;
	
	cursor:pointer;	
}

.categoryNavItemOver {
	color:#c83612;	

}

.categoryCurrent {
	color:#ffffff;
	background-color:#c83612;	
	
	cursor:default;
}

.projectsBand {
    background-image:url(../images/pageBackground.png);
	padding:10px 0 60px 0;
}

.projectsBandShrunk {
	
}

.projects {
}

.projects:after {
	content:".";
	display:block;
	height: 0;
	clear:both;
	visibility:hidden;
}

.projectItem {
	position:relative;

	width:23.148148%;		/* 250 / 1080 */


	margin:0.925926%;		/* 10 / 1080 */
	
	
	float:left;
		
	cursor:pointer;

	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
	-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}

.projectItemExclude {
/*
	opacity: .1; */

	background-color:#d0d0d0;	/* Temp - so i can see it on my old mac */
	background-color:#f5f2e7;
	
	border-bottom-color:#ffffff;
	cursor: default;

}

.projectItemShrink {

	width:5.787037%;
	margin: 0.231482%;	
}

.projectItemShrinkOver {
	padding-bottom:4px;
	border-bottom-style:solid;
	border-bottom-width:3px;
	border-bottom-color:#c0c0c0;

	transition: none;
	-moz-transition: none; /* Firefox 4 */
	-webkit-transition: none; /* Safari and Chrome */
}

.projectItemCurrent {
	padding-bottom:4px;
	border-bottom-style:solid;
	border-bottom-width:3px;
	border-bottom-color:#c83612;
}

.projectItem .projectItemImage {
	vertical-align:top;
	
	width:100%;	

	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out; /* Firefox 4 */
	-webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */
}

.projectItem .projectItemImageExclude {
	opacity: 0;
}

.projectItem .projectItemDetails {
	position:absolute;
	bottom:0px;
	left:0px;
	
	width:100%;
	height:50px;
	
	overflow:hidden;
		
	
	transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out; /* Firefox 4 */
	-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
	
}

.projectItem .projectItemDetailsExclude {
	opacity: 0;
}

.projectItem .pidOver {
	height:70px;
}

.projectItem .projectItemDetails .projectItemDetailsBackground {
	height:100%;
	background-color:#000000;
	opacity:.6;

}

.projectItem .projectItemDetails .projectItemTitle {
	position:absolute;
	top:10px;
	left:10px;
	
	line-height:1.25em;

	color:#ffffff;
	font-size:.7em;
}

.projectItem .projectItemDetails .projectItemInfo {
	position:absolute;
	
	top:42px;
	right:10px;
}

.projectItem .projectItemDetails .projectItemInfo .projectItemCategory {
	font-size:.6em;
	text-transform:uppercase;
	
	color:#f0f0f0;
	
	margin-left:1em;
	
}

.projectBand {
	background-color:#f5f2e7;	
}

.project {
}


.projectContents {
	padding:30px 0 40px 0;

}

.projectContents:after {
	content:".";
	display:block;
	height: 0;
	clear:both;
	visibility:hidden;
}


.projectLeftCol {
	float:left;

	width:73.148148%;		/* 790 / 1080 */

	margin-right:1.851852%;		/* 20 / 1080 */
	font-size:0.85714286em;		/* 12 / 14 */

}

.projectRightCol {
	float:left;
	
	width: 25%;				/* 270 / 1080 */

	font-size:0.71428571em;	/* 11 / 14 */
	line-height:1.5em;
}

.project .projectTitle {
	color:#96790f;
	font-size:1.5em;
	
	margin-bottom:10px;
}

.project .projectImage {
	width: 100%;
	
	margin-bottom:3.703704%;		/* 40 / 1080 */ 
	
	/*
	-moz-box-shadow: 0 0 1px #96790f;
	-webkit-box-shadow: 0 0 1px #96790f;
	box-shadow: 0 0 1px #96790f;
	*/
}

.project .projectCategories {
	font-weight: bold;
	text-transform:uppercase;
	margin-bottom:2em;
}

.project .projectCategory {
	margin-right:1em;
}

.project .projectActivities {
	margin-bottom:2em;
}

.project .pdTitle {
	color:#a0a0a0;
}

.project .imageDescription {

}

.project .projectSite {
	margin-top:2em;	
}

.visitSite {
	padding-right:14px;
	background-image:url(../images/visit_site.png);
	background-position:right center;
	background-repeat:no-repeat;	
	
	color:#c83612;
	text-decoration:none;
}

.visitSite:hover {
	color:#000000;	
}

.footerBand {	
	padding-top:2em;
	padding-bottom:12em;	
	
}

.footer {
	
}

.footer .footerColumn {
	position:relative;

	width:23.148148%;		/* 250 / 1080 */


	margin:0.925926%;		/* 10 / 1080 */
	
	
	float:left;
}

.footer .footerColumnTitle {
	color:#96790f;
	font-size:1.25em;
	
	margin-bottom:.25em;
}

.footer .footerColumnContent {
	font-size:.75em;
	color:#f0f0f0;	
	line-height:1.5em;
}

.footer a {
	color:#f0f0f0;	
	text-decoration:none;
}

/* phone adjustments */

@media screen and (max-width: 640px) {	/* phone */

.contentBand {
	margin:0 auto;
	
	width:95%;
}

.categories {
	display:none;	
}


.projectsBandShrunk {
	display:none;
}

.projectItem .projectItemDetails {
	display:none;
}

.projectItemShrink {
	display:none;
}

.projectLeftCol {
	float:none;
	width:100%;	
	margin-right:0;
}

.projectRightCol {
	float:none;
	width:100%;	
	margin-right:0;
	margin-bottom:2em;
}

.project .projectCategories {
	margin-bottom:1em;
}

.project .projectActivities {
	display:none;
}


.footer .footerColumn {
	float:none;
	
	width:100%;
	margin-bottom:1em;
}

.footerBand {	
	padding-bottom:2em;	
	
}

}