/* colors and other constants
	NEW COLORS
	Primary Navy : #00263a;
	Blue-Grey Dark : #4e6c7d;
	Blue-Grey Medium : #bdd2de;
	Grey-Light: #F1F5F7;

	ORIGINAL COLORS
	Primary Navy : #00263a or rgb(0,38,58);
	Grey : #7a99ac or rgb(122,153,172);
	Grey - Light : #f1f5f7 or rgb(241,245,247);
	White : #fff or rgb(255,255,255);

	Font weights for various fonts: Light/200, Normal/400, Demi/600, Bold/700
		font-family:'Cabrito Sans W01 Norm Regular'; - weight 400
		font-family:'Cabrito Sans W01 Cond Demi'; - weight 600
		font-family:'Cabrito Sans W01 Cond Bold'; - weight 700

	Basic sizing:
		Overall width: 1174px
		Left column: 852px
		Right column: 274px
		Gutters: 16px
		Check: 16 + 852 + 16 + 274 + 16 = 1174
*/

/* basic layout and top level reactive */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body > div,
header,
footer {
	position:relative;
}
header,
footer {
	width:117.4rem;
	margin: 0 auto;
}
header {
	box-sizing:border-box;
	height:13.6rem;
}
header h1 {
	margin:0;
}
#primaryNav {
	position:absolute;
	top:7.4rem;
	left:40%;
	width:60%;
	z-index:1200;
}
#primaryNav ul {
	margin:0; padding:0; list-style:none;
}
/* NAV LEVEL ONE */
ul.dropdown {
	position: relative;
}
ul.dropdown > li {
	display: inline;
	position: relative;
}
ul.dropdown > li a {
	padding: 0 1.0rem;
} 
ul.dropdown > li:first-child a {
	padding-left:0;
}
/* NAV LEVEL TWO */
ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
}
ul.dropdown > ul li:first-child {
	margin-top:0.5rem;
}
ul.dropdown ul li a {
	display:block; 
	white-space: nowrap;
} 
/* NAV LEVEL >TWO */
ul.dropdown ul ul {
	left: 100%;
	top: 0;
}
ul.dropdown li:hover > ul {
	visibility: visible;
}
#content {
	position:relative;
}
#content > div,
#content > section {
	position:relative;
	box-sizing: border-box;
	overflow:hidden;
	width:117.4rem;
	margin: 0 auto;
}
#content > #banner { /* context width: 1117.4rem = 1174px */
	padding: 1.8rem 1.533219761%; /* 18px ; 18 / 1174 */
}
#content > #banner p {
	margin:0;
}
#modules { /* context width: 1174px */
	position:relative;
	box-sizing:border-box;
	padding:0.6814310051%; /* ( 16 / 2) / 1174 */
}
#modules > #projects,
#modules > #mainContent {	/* context width: 1174 - 16 = 1158 */
	position: relative;
	box-sizing: border-box;
	float:left;
	width:74.95682211%;	/* 852 + 16 = 868; 868 / 1158 */
}
#modules > #mainContent {	/* context width: 1174 - 16 = 1158 */
	padding:2.5rem 2.936096718%;	/* 2.5rem ; 34 / 1158 */
}
#breadcrumb {
	position:relative;
	top:-3rem;	
}
#modules > #projects > div {	/* Context width: 852 + 16 = 868 */
	position:relative;
	box-sizing: border-box;
	float:left;
	margin:0.9216589862%;	/* (16 / 2) / 868 */
	width:31.37480799%;	/* (868 - 16*3 - 0.5*6) / 3 = ~272.3 ; ~272.3 / 868 */
	height:25rem;	/* at this height, all current content has room at all widths */
	border-width: 0.05rem;
	padding:2.5rem 2.304147465%;	/* 2.5rem ; 20 / 868 */
}
.projectLogo {	/* Context height 25rem = 250px */
	position:relative;
	padding-top: 20.08368201%;	/* 48 / 239 ; this combined with height:100% in the image makes the height a percentage based on width */
	margin:0 0 3rem 0;
}
.projectLogo img {
	position:absolute;
	height:100%;
	width:auto;
	top:0;
	left:0;		/* left,right,margin center the logo */
	right:0;
	margin:0 auto;
}
.projectPage p.projectLogo {
	padding-top:0;
	padding-bottom:0.5rem;
}
.projectPage p.projectLogo img {
	position:relative;
	right:auto;
	height:4.0rem;
}
#modules > #blogFeed {	/* context width: 1174 - 16 = 1158 */
	position: relative;
	box-sizing:border-box;
	float:left;
	width:73.57512953%; 	/* 852 / 1158 */
	margin:0 0.6908462867%;	/* 0 ( (16/2)/1158) */
}
#auxItems {	/* context width: 1174 - 16 = 1158 */
	position: relative;
	box-sizing: border-box;
	float:right;
	width:25.04317789%;		/*	274 + 16 = 290; 290 / 1158 */
}
#auxItems > div { /* context width: 274 */
	position:relative;
	box-sizing:border-box;
	padding:2.5rem 1.4rem 6rem 1.4rem;
	margin:2.75862069%;	/* (16/2) / 290 */
}
#auxItems > div.multilinebutton { /* handles up to 3 lines */
	padding-bottom:8.6rem;
}

/* visual styles */
html, body {
	font: normal 400 62.5%/100% 'Cabrito Sans W01 Norm Regular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #00263a;
	background-color:#00263a;
}
a { 
	color: #4e6c7d;	/* override with Project Primary/Dark Color */
	text-decoration: none;
}
a:link {
	color: #4e6c7d;	/* override with Project Primary/Dark Color */
}
a:visited {
	color: #00263a;
}
a:hover {
	color: #00263a;
	text-decoration: underline;
}
a:active {
	color: #00263a;
}
#modules > #projects a,
#modules > #mainContent a {
	text-decoration: underline;
}
#modules > #projects .button a,
#modules > #projects .button a:hover,
#modules > #mainContent .button a, 
#modules > #mainContent .button a:hover {
	text-decoration: none;
}
#mainContent h2 {
/* this is the style defined as h1 in the styleguide */
	font-family:'Cabrito Sans W01 Cond Demi'; 
	font-size:2.1rem;
	font-weight:normal;
	line-height:2.4rem;
	color: #00263a;
	margin-top:0;
	margin-bottom:2.3rem;
	text-transform: uppercase;
}
#mainContent h3 {
	font-family:'Cabrito Sans W01 Cond Demi'; 
	margin-top:3.2rem;
	font-size: 1.8rem;
	font-weight:normal;
	line-height: 1.8rem;
	color:#00263a;
	text-transform: uppercase;
}
#mainContent h4 {
	background-color:#f1f5f7;
	padding:0.2rem 0.5rem;
	border-left:1px solid #7a99ac;
	border-bottom:1px solid #7a99ac;
}
body > header,
body > div,
body > footer {
	color:#fff;
}
header {
	padding-top:5rem;
	background: #00263a url("/_img/bkgNumberBar.png") bottom left/auto 1.1rem repeat-x;
}
#primaryNav {
	font-family:'Cabrito Sans W01 Cond Demi'; 
	font-weight:normal;
	font-size:1.4rem;
	line-height:1.6rem;
	letter-spacing: 0.05rem;
	color:#f5f8f9;
	text-transform: uppercase;
	border-top: 0.1rem solid #7a99ac;
	padding-top:1.0rem;
	padding-bottom:2.6rem;
}
#primaryNav a {
	text-decoration: none;
	color:#f5f8f9;
}
#primaryNav a sup {
	font-size:1.4rem;
	padding-left:0.2rem;
	vertical-align: 12%;
}
#primaryNav a:hover {
	color:#7a99ac;
}
#primaryNav ul li {
	border-right: 0.05rem solid #f5f8f9;
}
#primaryNav ul li:last-child,
#primaryNav ul ul li {
	border-right: none;
}
#primaryNav ul ul li {
	border-bottom: 0.05rem solid #7a99ac;
	font-family: 'Cabrito Sans W01 Norm Light';
}
#primaryNav ul ul li:last-child {
	border-bottom: none;
}
#primaryNav ul.dropdown ul li a {
	color:#00263a;
	background-color:#f5f8f9;
	border-left:0.05rem solid #f5f8f9;
	border-right:0.05rem solid #f5f8f9;
	padding:1rem 1rem;
} 
#primaryNav ul.dropdown ul li a:hover {
	color:#f5f8f9;
	background-color:#7a99ac;
}
#siteLogo img {
	width:25.95rem;
	height:5.03rem;
}
#content {
	font-size:1.4rem;
	line-height:1.8rem;
	color:#00263a;
	background-color:#11374b;
}
#content > div,
#content > section {
	background-color:#fff;
}
#content > section#banner {
	font: normal normal 1.4rem/1.4em 'Cabrito Sans W01 Cond Demi';
	color:#00263a;
	background-color:#bdd2de;
	border-bottom:2px solid #11374b;
}
#banner strong {
	font-weight:normal;
	font-size:2.0rem;
	text-transform: uppercase;
}
#banner a, #banner a:link {
	color:#00263a;
	text-decoration: underline;
}
#breadcrumb {
	font: normal normal 1.1rem/1.8rem 'Cabrito Sans W01 Cond Demi';
	text-transform:uppercase;
}
#breadcrumb a {
	color:#7a99ac;
}
#modules > section#projects > div {
	font-size: 1.2rem;
	border-style:solid;
	border-color:#7a99ac;
	text-align: center;
}
#projects > div p {
	margin-top:2.3rem;
}
#modules > #blogFeed {
	background-color:#f1f5f7;
}
#auxItems > div {
	color:#00263a;
	background-color:#f1f5f7;
	text-align: center;
}
#auxItems > div a[href],
#auxItems > div a[href]:link,
#auxItems > div a[href]:visited {
	color: #4e6c7d;
}
#auxItems > div a[href]:hover,
#auxItems > div a[href]:active {
	color: #00263a;
}

/* using line behind title technique from http://codepen.io/ericrasch/pen/Irlpm */
#auxItems > div > h2 {
  display: table;
  white-space: nowrap;
  color:#4e6c7d;
  font-size:2.1rem;
	font-family:'Cabrito Sans W01 Cond Bold';
	font-weight:normal;
  text-transform:uppercase;
  margin:0;
  overflow: hidden;
}
#auxItems > div > h2:before,
#auxItems > div > h2:after {
	border-top: 1px solid #4e6c7d;
	content: '';
	display: table-cell;
	position: relative;
	top: 0.7rem;
	width: 10rem; /*10rem;*/
}
#auxItems > div > h2:before { right: 1rem; }
#auxItems > div > h2:after { left: 1rem; }

#auxItems div#researchAwardsWidget {
	color:#00263a;
	background-color:#bdd2de;
}
#auxItems div#researchAwardsWidget > h2 {
	color:#00263a;
}
#auxItems div#researchAwardsWidget > h2:before,
#auxItems div#researchAwardsWidget > h2:after {
	border-color:#00263a;
}
#researchAwardsWidget .awardTitle {
	position:relative;
	font-family:'Cabrito Sans W01 Cond Demi';
	text-transform:uppercase;
	padding-bottom:1rem;
	border-bottom:1px solid #fff;
}
#calendarWidget p,
#jobsWidget p {
	margin-top:0;
	margin-bottom:0;
	font-size:1.2rem;
}
#calendarWidget h3 {
	font-size:1em;
}
.calendarEvent,
.jobListing {
	margin-top:2rem;
	margin-bottom:2rem;
}
#jobsWidget .jobTitle,
#jobsWidget .jobLink {
	font-family:'Cabrito Sans W01 Cond Demi';
	margin-bottom:1rem;
}
#jobsWidget .jobTitle {
	font-size:1.5rem;
}
#calendarWidget .date,
#calendarWidget .eventLink,
#jobsWidget .jobLink {
	text-transform: uppercase;
}
#calendarWidget .eventLink a,
#jobsWidget .jobLink {
	text-decoration: none;
}
#calendarWidget .eventLink a:hover,
#jobsWidget .jobLink a:hover {
	text-decoration: underline;
}
#calendarWidget .eventLink a:after,
#jobsWidget .jobLink a:after {
	content:" \00BB";
}
#auxItems > div#socialWidget {
	padding-top:;
	padding-bottom:1rem;
	text-transform:uppercase;
	font-size:1.2rem;
	font-family:'Cabrito Sans W01 Cond Demi'; 
	color:#7a99ac;
	text-align:right;
}
#socialWidget img {
	width:3.2rem;
	height:3.2rem;
	margin:0 0.3rem;
}
#auxItems > #visitSiteWidget {
	background-color:#00263a;
}
#auxItems > div.doiWidget {
	padding-bottom:1.4rem;
}
.doiWidget ul {
	padding-left:0;
	line-height: 1.6em;
}
.doiWidget li {
	list-style-type: none;
	margin-bottom:0.2rem;
}
.doiWidget a {
	margin-left:-1.4rem;
	margin-right:-1.4rem;
	padding-top:0.2rem;
	padding-bottom:0.2rem;
}
.doiWidget h3 {
	font-size:1.5rem;
}
.doiWidget h3,
#calendarWidget h3 {
	margin-bottom:0rem;
}
.doiWidget h3 + ul {
	margin-top:0.4rem;
}
#auxItems > div.doiWidget > h2 {
	font-size:1.8rem;
}

.doi-overview #auxItems > div .doi-overview a {
  display:block;
  color:#fff;
  background-color: #4e6c7d;
}

#modules:after {
  content: "";
  display: table;
  clear: both;
}
.button a {
	position:absolute;
	bottom:2.5rem;
	width:11.5rem;
	left:0;
	right:0;
	margin:0 auto;
	color: #00263a;
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
	font-size: 1.5rem;
	line-height: 1.9rem;
	padding-top:0.6rem;
	padding-bottom:0.6rem;
	text-transform: uppercase;
	text-decoration:none;
	border:1px solid #7a99ac;
	text-align:center;
}
.projectPage #mainContent h2 {
	font-family:'Cabrito Sans W01 Cond Demi';
	margin-bottom:0.5rem;
}
.projectPage #mainContent h2 + h3 {
	font-size:1.7rem;
	margin-top:0.5rem;
}
.projectPage article .button {
	margin-top:5rem;
}
.projectPage article .button a {
	position:relative;
	top:auto;
	bottom:auto;
	padding-left:3rem;
	padding-right:3rem;
}
.button a:hover {
	color:#fff;	
	background-color:#7a99ac;
	border-color:#fff;
}
#researchAwardsWidget .button a {
	width:16rem;
}
#researchAwardsWidget .button a {
	color:#00263a;
	border:1px solid #00263a;
}
#visitSiteWidget .button a {
	width:15rem;
	color:#fff;
	border:1px solid #fff;
}
#researchAwardsWidget .button a:hover {
	color:#7a99ac;
	background-color:#fff;
	border:1px solid #fff;
}
#donationWidget .button a,
#calendarWidget .button a {
	width:15rem;
}
#blogFeed h2 {
    font-size:2.1rem;
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
	margin-left:1.6rem;
}
#blogFeed h3 {
	font-family:'Cabrito Sans W01 Cond Bold'; 
	font-weight:normal;
}
.blogPic {
	float:left;
	margin:0;
}
.blogPic img {
	height:auto;
	width:13.5rem;
}
#blogFeed p {
	padding-right:1.6rem;
	padding-left:1.6rem;
}

footer {
	font-family:'Cabrito Sans W01 Norm Light';
	color:#fff;
	text-align: center;
	text-transform: uppercase;
	padding-top:2.7rem;
	padding-bottom:2.7rem;
	letter-spacing: 0.05rem;
}
footer ul {
	font-family:'Cabrito Sans W01 Cond Demi'; 
	font-weight:normal;
	font-size: 1.0rem;
	line-height:1.4rem;
	padding:0;
}
footer ul li a, footer ul li a:link, footer ul li a:visited {
	color:#fff;
	margin:0 0.5rem;
	text-decoration: none;
}
footer ul li a:hover {
	color:#7a99ac;
	text-decoration: underline;
}
footer ul li {
	display: inline;
	list-style-type: none;
	border-right: 0.05rem solid #fff;
}
footer ul li:last-child {
	border-right: none;
}
footer p {
	font-size: 0.8rem;
	line-height: 1.2rem;
}
/*
a.extLink {
	background-image: url("/_img/icoExtLink_00263a.svg");
	background-position: center right;
	background-repeat: no-repeat;
	background-size:1.4rem 1.4rem;
	padding-right:1.6rem;
	height: 100%;
	display: inline-block;
}
a.extLink:linked {
	background-image: url("/_img/icoExtLink_00263a.svg");
}
a.extLink:visited {
	background-image: url("/_img/icoExtLink_7a99ac.svg");
}
a.extLink:hover {
	background-image: url("/_img/icoExtLink_00263a.svg");
}
*/

/*** BEGIN other specialized styles ***/
strong, b {
	font-family:'Cabrito Sans W01 Cond Demi';	
	font-weight:normal;
}
#mainContent li {
	margin-bottom: 1rem;
}
.numberColumns {
	font-family:Verdana, Arial, Helvetica Neue, Helvetica, sans-serif;
}
table {
	border-spacing:0;
	border-collapse: collapse;
}
td, th {
	border:1px solid #f1f5f7;
	margin:0;
	padding-left:0.5rem;
	padding-right:0.5rem;
}
tr:hover {
	background-color:#f1f5f7;	
}
h3.event {
	font-family:'Cabrito Sans W01 Cond Demi';	
	margin-bottom:0;
}
h3.event + p {
	margin-top: 0;
}
h3.event + blockquote {
	margin-left:1em;
	margin-top:0.5em;
}
h3.event + blockquote > p:first-child {
	margin-top:0;
}
/*** END other specialized styles ***/


/* responsive/adaptive design elements */
@media screen and (max-width: 1220px) {
	body {
		margin-left:20px;
		margin-right:20px;
	}
	header,
	footer,
	#content > div,
	#content > section {
		width:100%;
	}
	#modules > aside#auxItems div#researchAwardsWidget > h2 {
		font-size: 1.6rem; /* fallback */
		/* scale between 1.4 and 2.1 when between 800 and 1220 px */
		/* min size + (max size - min size in px)*(100%width-800px min)/(1220px-800px range) */
		font-size:calc(1.4rem + (7)*(100vw - 800px)/(420));
	}
}

@media screen and (max-width: 800px) {
	/* drop to three columns and pull the logo up to make room for the menu  */
	/* current gutters should be 1.36286201% of 800 or 10.9px */
	body {
		margin-left:2.5%;	/* 20 / 800 */
		margin-right:2.5%;
	}
	header {
		padding-top:1.2rem;
	}
	#primaryNav {
		left:0;
		width:100%;
	}
	#modules {  /* context width: 800 - 40 = 760px */
		padding:0.7171052632%; /* ( 10.9 / 2) / 760 */
	}
	#modules > #projects,
	#modules > #mainContent { /* context width: 800 - 40 - 10.9 = 749.1px */
		width:66.66666667%;	/* (2/3) */
	}
	#modules > #mainContent { /* context width: 800 - 40 - 10.9 = 749.1px */
		padding-left: 4.538779869%;	/* 34 / 749.1 */
		padding-right: 4.538779869%;	
	}
	#modules > #projects > div { /* context width: 2/3 * 749.1 = 499.4 */
		width:47.81738086%;	/* 1/2 * (499.4 - 2*10.9)/499.4 */
		margin:1.091309571%; /* (10.9/2) / 499.4 */
	}
	#modules > #blogFeed { /* context width: 800 - 40 - 10.9 = 749.1px */
		width:65.21158724%;	/* ((2/3) * 749.1) - 10.9 = 488.5/749.1 */
		margin:0.7275397143%; /* (10.9/2) / 749.1 */
	}
	#modules > #auxItems { /* context width: 800 - 40 - 10.9 = 749.1px */
		width:33.33333333%; /* (1/3) */
	}
	#modules > aside#auxItems div#researchAwardsWidget > h2 {
		font-size: 1.4rem; /* fallback */
		/* scale between 1.4 and 1.8 when between 560 and 800 px */
		/* min size + (max size - min size in px)*(100%width-560px)/(800px-560px range) */
		font-size:calc(1.4rem + (4)*(100vw - 560px)/(240));
	}
}

@media screen and (max-width: 560px) {
	/* drop to two columns*/
	/* current margins should be at 2.5% of 560px or 14px */
	/* current guters should be at 1.434210526% of 532 = 7.63px. */
	#modules > #projects,
	#modules > #mainContent { /* context width: 560 - 28 - 7.63 = 524.37 */
		width:50%;	/* 1/2 */
	}
	#primaryNav {
		font-size: 1.0rem; /* fallback */
		/* scale between 1.0 and 1.4 when between 380 and 560 px */
		/* min size + (max size - min size in px)*(100%width-380px)/(560px-380px range) */
		font-size:calc(1.0rem + (4)*(100vw - 380px)/(180)); */
	}
	#modules > #projects > div {
		margin:2.75862069%;	/* copied auxItems margins from above */
		width:94.48275862%;	/* 100% - 2* 2.75862069% */
	}
	#modules > #blogFeed {
		width:100%;
	}
	#modules > #auxItems {
		width:50%; /* 1/2 */
	}
	#modules > aside#auxItems div#researchAwardsWidget > h2 {
		font-size: 1.4rem; /* fallback */
		/* scale between 1.4 and 2.1 when between 380 and 560 px */
		/* min size + (max size - min size in px)*(100%width-380px)/(560px-380px range) */
		font-size:calc(1.4rem + (7)*(100vw - 380px)/(180));
	}
}
@media screen and (max-width: 380px) {
	body {
		margin-left:0;
		margin-right:0;
	}
	#siteLogo {
		box-sizing:border-box;
		padding-left:1.5rem;
	}
	#primaryNav {
		padding-left:1rem;
		font-size: 0.8rem; /* fallback */
		/* scale between 0.8 and 1 when between 320 and 380 px */
		/* min size + (max size - min size in px)*(100%width-320px)/(380px-320px range) */
		font-size:calc(0.8rem + (2)*(100vw - 320px)/(60));
	}
	#modules > #projects,
	#modules > #mainContent {
		width:100%;	/* rough numbers. make more perfect */
	}
	#modules > #projects > div {
		width:100%;	/* rough estimate. make more perfect. */
		margin-left:0;
		margin-right:0;
		margin-bottom:0.2rem;
	}
	#modules > #auxItems {
		width:100%; /* rough estimate. make more perfect. */
	}
	#modules > #auxItems > div {
		margin-left:0; 
		margin-right:0;
	}
	#modules > aside#auxItems div#researchAwardsWidget > h2 {
		font-size: 2.1rem;
	}
}