﻿/*
 * Project Styles
 * 
 */

/* ==========================================================================
   Base styles and resets
   ========================================================================== */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
html{-webkit-text-size-adjust: none;}
strong{ font-weight:bold;}
img{ vertical-align:top;}
.cl{ clear:both; font-size:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

a { color: #00e; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0; padding: 0; }
li { list-style:none; margin:0; padding:0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==========================================================================
   General 
   ========================================================================== */
html { background:#fff; overflow-y:scroll;}
body { font-family: 'National-Regular'; color:#000; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

img {max-width:100%; height:auto;}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.wrapper { width:1000px; margin:0 auto; position:relative; }
.wrapper:before, .wrapper:after { content: ""; display: table; }
.wrapper:after { clear: both; }
.wrapper { *zoom: 1; }

a { text-decoration:none; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease;
outline:none!important; }
	a:hover { text-decoration:underline;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */
    color:    #834e2e;
	opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #834e2e;
	opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #834e2e;
	opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #834e2e;
	opacity:1;
}

/* ==========================================================================
   Fonts
   ========================================================================== */
	@font-face {
	  font-family: 'National-Book';
	  src: url('../fonts/National-Book.eot?#iefix') format('embedded-opentype'),  url('../fonts/National-Book.otf')  format('opentype'),
			 url('../fonts/National-Book.woff') format('woff'), url('../fonts/National-Book.ttf')  format('truetype'), url('../fonts/National-Book.svg#National-Book') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}	
	@font-face {
	  font-family: 'National-Medium';
	  src: url('../fonts/National-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/National-Medium.otf')  format('opentype'),
			 url('../fonts/National-Medium.woff') format('woff'), url('../fonts/National-Medium.ttf')  format('truetype'), url('../fonts/National-Medium.svg#National-Medium') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}	
	@font-face {
	  font-family: 'National-Regular';
	  src: url('../fonts/National-Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/National-Regular.otf')  format('opentype'),
			 url('../fonts/National-Regular.woff') format('woff'), url('../fonts/National-Regular.ttf')  format('truetype'), url('../fonts/National-Regular.svg#National-Regular') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}

/* ==========================================================================
   
   ========================================================================== */

#header{ padding-top:37px; min-height:95px;}

	.nav{ list-style:none; text-align:center; position:relative;}
		.nav li{ list-style:none; display:inline-block; padding:0px 20px; }
			.nav > li > a{ font-family: 'National-Medium'; font-size:14px; line-height:20px; color:#000; text-transform:uppercase;}
			.nav > li.on > a,
			.nav > li > a:hover{  color:#000; text-decoration:underline; }
			
	.logo a{ display:inline-block; width:41px; height:11px; overflow:hidden; line-height:11px; background:url(../images/logo.png) no-repeat 0 0; overflow:hidden; text-indent:9999px; }
	
	.nav > li > ul {display:none; position:absolute; top:100%; left:0px; width:100%; text-align:center;  padding-top:20px;}
	.nav > li.on > ul {display:block;}
		.nav > li > ul > li {}
			.nav > li > ul > li > a { font-family: 'National-Book';  font-size:14px; line-height:20px; color:#000;}
			.nav > li > ul > li > a:hover{text-decoration:none;}
	.nav .logo a {margin-bottom: -2px;}		
	.projects-nav .logo a{background-position:0px -11px; margin-bottom: -2px;}
		.projects-nav > li > ul > li > a:hover, .projects-nav > li > ul > li.on > a {color:rgb(40,62,148); text-decoration: underline;}
	
	.news-nav .logo a{background-position:0px -22px;  margin-bottom: -2px;}
		.news-nav > li > ul > li > a:hover, .news-nav > li > ul > li.on > a {color:rgb(131,117,65);text-decoration: underline;}
		
	.about-nav .logo a{background-position:0px -33px;  margin-bottom: -2px;}
		.about-nav > li > ul > li > a:hover, .about-nav > li > ul > li.on > a {color:rgb(115,110,108);text-decoration: underline;}


.interactive-logo {position:fixed; top:0px; left:0px;     bottom: 0px;    right: 0px; width:100%; text-align:center; z-index:200; /* padding-top:330px;  */pointer-events:none; display:none; }
.interactive-logo * {pointer-events:none; }

			
#main-content {padding-top:50px;}	
	#grid {}
		.item {width:320px; margin-bottom:50px;}
		/* .item {width:280px; margin-bottom:40px;} */
			.item img {display:block; margin-bottom:20px; margin: 0 auto 20px; margin: 0 auto 0;max-width: 260px;}
			.item-text {padding:20px; text-align:center; font-size:12px; line-height:16px; color:#000;}	
				.additional-tags {font-family: "National-Book";font-size: 12px;line-height: 16px;color: #000;font-variant: small-caps;}
				.additional-tags a, .additional-tags a:visited, .additional-tags a:hover {font-family: "National-Book";font-size: 12px;line-height: 16px;color: #000;font-variant: small-caps;}
				.tags {list-style:none; display:block; width:100%;}
				
					.tags li {list-style:none; display:inline-block; margin:0; padding:0; }	
						.tags li a{font-family: 'National-Book';  font-size:12px; line-height:16px; color:#000; font-variant: small-caps;}
						.tags li:after {content:", "; font-family: 'National-Book';  font-size:12px; line-height:16px; color:#000;}
						.tags li.last:after {content:"";}	
				.item-title {  padding-bottom:4px; display:block; color:#000; text-transform: capitalize;}	
					.item-title:hover { color:#000;}
				.item-text p {padding-bottom:8px;}
				.item-text p a {color:#000; text-decoration:underline;}
					
				.news-title {font-family: 'National-Book'; font-size:12px; line-height:20px; color:#000; padding-bottom:4px; display:block; }	
					.news-title a { color:#000; text-decoration:underline;}
				
		.intro-paragraph {}
			.intro-paragraph .item-text{ text-align:left;  font-size:20px; line-height:24px; color:#000; }
				.intro-paragraph h2 {font-family: 'National-Medium';text-transform:uppercase; padding-bottom:25px;}
				.intro-paragraph p {font-family: 'National-Book'; }
		
		.item.body-paragraph {width:640px;}
			.body-paragraph .item-text{ text-align:left;  font-size:16px; line-height:20px; color:#000; padding:20px 85px;}
				.body-paragraph h2 {font-family: 'National-Medium';text-transform:uppercase; padding-bottom:20px;}
				.body-paragraph p {font-family: 'National-Book'; padding-bottom:20px;}
				
		.intro-paragraph h2.project-title { padding-bottom:0px;}
			.project-location {display:block; font-family: 'National-Book';}
			.project-status {display:block; font-family: 'National-Book';  padding-bottom:25px;}

.item-text.widget span.news-title {font-family: "National-Book";    font-size: 12px;    line-height: 16px;    color: #000;    font-variant: small-caps;}
.item-text.widget h6 {font-family: "National-Book";    font-size: 12px;    line-height: 16px;    color: #000;    font-variant: small-caps;}
#mobile-trigger {display:block; width:50px; height:33px;   overflow:hidden; text-indent:100%; float:right; position:relative; z-index:200;
  background-image:url(/images/icon-burger.png);
  background-image: 
    linear-gradient(transparent, transparent),
    url(/images/icon-burger.svg);
    background-repeat: no-repeat;
}	
.item-text.widget.contact a{text-decoration: none;}
.item-text.widget.contact a:hover {text-decoration: underline;}

.item-text.widget.contact p{font-size: 16px;line-height: 20px;}
.item-text.widget.contact p:last-child, .item-text.widget.contact p.social_p{ font-size: 12px;}

/* .widget.other-contributors {font-size: 16px; line-height: 20px;} */
.widget.other-contributors span {padding-bottom: 10px;}

#mobile-logo,  #mobile-trigger {display:none;}

.disabled {cursor:default;}

.social {text-transform: uppercase;font-size: 10px;}
.social span {cursor: pointer;}
.social span:hover {text-decoration: underline;}
.social a, .social a:link,.social a:visited,.social a:hover {color: #000;}

/*

.fancybox-wrap {width: 90%!important; left:5%!important; height: 90%!important; top:5%!important;}
.fancybox-wrap	.fancybox-inner {margin: 0 auto!important;}
	
*/
	
.tb {width: 100%;height: 100%;display: table;}
.tc {display: table-cell;vertical-align: middle; text-align: center;}
	
	


@media only screen and (min-width: 1400px){
	.wrapper {width: 1350px;}
}

@media only screen and (min-width: 1750px){
.wrapper {width: 1700px;}
}

/* ==========================================================================
   Portrait iPad
   ========================================================================== */
@media only screen and (max-width: 1023px){
	
	.wrapper { width:660px;  }
	
}

/* ==========================================================================
   Landscape iPhone
   ========================================================================== */
@media only screen and (max-width: 767px){

	.wrapper { width:320px;  }
	.item.body-paragraph {width:320px;}	
	.body-paragraph .item-text{ padding:20px;}
	.interactive-logo {display:none!important;}
	
	#mobile-logo,  #mobile-trigger {display:block;}
	
	.nav{ list-style:none; text-align:center; position:relative; padding-top:15px; display:none;}
		.nav li{ list-style:none; display:block; padding:10px 20px; width:100%;}		
		.nav li.logo {display:none;}
		/* .nav > li > ul {display:block; position:relative; top:auto; left:auto; width:100%; text-align:center;  padding:10px; padding-bottom:0px;} */
		.nav > li > ul {display:none; position:relative; top:auto; left:auto; width:100%; text-align:center;  padding:10px; padding-bottom:0px;}
			.nav > li.on > ul {display:block;}
				.nav > li > ul > li {padding:2px;}
	
}

/* ==========================================================================
   Portrait iPhone
   ========================================================================== */
@media only screen and (max-width: 479px){
	
	.wrapper { width:320px; overflow:hidden; padding:0px 10px; }
	.item {width:300px; overflow:hidden; }
	.item.body-paragraph {width:300px;}		
	#main-content { padding-top: 0;}
	
	
}