/*************************************************************************************************************
This is the CSS file for The Levin Lab website at https://drmichaellevin.org/ (hosted at Bluehost.com).
The website started as a copy of the Levin Lab website at https://ase.tufts.edu/biology/labs/levin/ and then 
gradually changed from 10 June 2022 on. By now the design is responsive and mobile first.
Marc Smeehuijzen, UX Designer, marc.smeehuijzen@easytech.nl.
**************************************************************************************************************/

/*************************	
Base elements
**************************/

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom. Without this statement fontsize in content div gets bigger on iPhone in landscape. */
}

body
{
    font-family: "arial", "helvetica", "san-serif";
    font-size: 1em; 
    color: #333;
	margin: 0px;
	background: #999999;
}

h2
{
    color: #b97c02;
	margin-top: 1.3em;
}

h3
{
	margin-top: 1.5em;
}

p, ol, ul
{
    line-height: 1.4em;
	margin-bottom: 1.4em;
}

li
{
	margin-bottom: 0.5em;
}

/* For lists on homepage in sidebar (on desktop) or at the bottom (on mobile) */
ul.compact
{
	margin-top: 0.5em;
	margin-bottom: 0em;
	padding-inline-start: 20px;
}

/* For a list with the same bottom margin as a <li> */
ul.littlespacebottom
{
	margin-bottom: 0.5em;
}

/* For lists on homepage in sidebar (on desktop) or at the bottom (on mobile) */
li.compact
{
	margin-bottom: 0.5em;
}

p.nospacebottom {
	margin-bottom: 0em;
}

/* For credit image on homepage */
p.caption {
	float: right;
	font-size: 0.8em;
	color: gray;
	margin-bottom: 0em;
}

p.backlink {
	margin-top: 1.5em;
}

p.quote {
	margin-bottom: 0em;
}

p.quote-source {
	margin-top: 0em;
/*	margin-bottom: 2em; */
	font-style: italic;
	text-align: right;
}

a:link, a:visited
{
    color: #1998bd;
	font-weight: bold;
}

a.headertitle {
	font-weight: 100;
	text-decoration: none;
}

a.topnav {
	color: #ffffff;
	text-decoration: none;
}

a.secnav {
    color: #2b7a78;
}

/* To separate the Decoration div (with images and quotes) from the Secnav div with a horizontal line */
hr.divider {
	margin-bottom: 1.5em;
}

video.responsive {
	max-width: 100%;
	height: auto;
}

/* To make embedded YouTube videos responsive */
.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

/* To make the iframe in the embedded YouTube videos responsive */
.video-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* Hack to clear floating divs if needed */
div.spacer {
	clear: both;
	font-size: 0em;
}

/****************************	
Images and accompanied text
*****************************/

/* This makes images responsive. They will never be wider than their container. */
img {
	max-width: 100%;
}

/* To create some whitespace in the Decoration div between the images and the quotes underneath them because they are unrelated */
img.spacebottom {
	margin-bottom: 1em;
}

/* To display images 100% wide */
img.fullwidth {
	width: 100%;
}

/* To give images a border */
img.border {
	border-width: 2px;
	border-style: solid;
}

/* Puts some whitespace (gaps) between multiple images */
div.image-multiple {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-start; /* Otherwise images can get stretched */
}

/* To create some whitespace in the Decoration div between the images and the quotes underneath them because they are unrelated */
div.image-multiple-spacebottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-start; /* Otherwise images can get stretched */
	margin-bottom: 2em;
}

img.floatright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

div.paperwithcover {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	margin-bottom: 1.4em; /* Similar to margin used by P elements */
	margin-top: 1.4em; /* Similar to margin used by P elements */
}

div.paper {
	line-height: 1.4em;
}

div.cover {
	line-height: 0em; /* Otherwise you get a white gap underneath the images. Maybe bug. */
	width: 100px;
	border-style: solid;
	border-color: #1998bd;
}

div.scientist-portrait {
	grid-area: scientist-portrait;
	line-height: 0em; /* Otherwise you get a white gap underneath the images */
}

div.scientist-name {
	grid-area: scientist-name;
	font-size: 1.2em;
	font-weight: bold;
}

div.scientist-years {
	grid-area: scientist-years;
	color: #999999;
}

div.scientist-writings {
	grid-area: scientist-writings;
}

div.scientist {
	display: grid;
	gap: 1em;
	margin-bottom: 2em;
	grid-template-areas:
	'scientist-portrait'
	'scientist-name'
	'scientist-years'
	'scientist-writings'
}

div.opto-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	align-items: baseline;
}

/*
div.opto-image-and-caption {
}
*/

div.opto-image {
	border-style: solid;
	border-color: #1998bd;
	line-height: 0em; /* Otherwise you get a white gap underneath the images */	
	}

div.opto-caption {
	margin-top: 0.4em;
}

/********************************	
Layout of the website with Grid
*********************************/

div.header {
	grid-area: header;
	background-color: #2b7a78;
	display: none;
}

/* The Levin Lab */
div.headertitle {
	color: #f3e2a7;
	font-family: Georgia, 'Times New Roman', Times, serif; /* The website title font is somewhat similar to Tufts' and the favicon font */
	letter-spacing: 1px;
	font-size: 1.6em;
	float: left;
	padding-top: 18px;
	padding-left: 25px;
	padding-right: 40px;
	padding-bottom: 18px;
}

div.topnav {
	grid-area: topnav;
	padding-left: 25px;
	padding-right: 25px;
	/* padding-top: 20px; */
	/* padding-bottom: 20px; */
	background-color: #3aafa9;
	display: none;
}

div.topnav-wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.8em;
	float: left;
	padding-top: 20px;
	padding-bottom: 20px;
}

div.topnav-item {
	font-weight: bold;
}

div.secnav {
	grid-area: secnav;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #def2f1;
	display: none;
}

div.secnav-wrapper {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.8em;
	row-gap: 1em;
}

div.secnav-item {
	font-weight: bold;
}

/* Exception for text in secnav instead of links */
div.secnav-item-text {
	line-height: 1.4em;
}

div.content {
	grid-area: content;
	padding-top: 20px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 0px;
	background-color: #ffffff;
}

div.decoration {
	grid-area: decoration;
	padding-top: 10px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 30px;
	background-color: #ffffff;
}

/* Separate class for the address info on the homepage on small screens. On wider screens it's located in div.secnav */
div.address-home {
	margin-bottom: 2em;
}

div.footer {
	grid-area: footer;
	font-size: 0.9em;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #ffffff;
	text-align: center;
	background-color: #2b7a78;
}

/* This wrapper contains the entire page (on small screens) */
div.wrapper {
	display: grid;
	grid-template-areas:
	'hamburger-menu'
	'content'
	'decoration'
	'footer';
}

/* For the search results page - on small screens - the wrapper style is identical. On large screens it's slightly different - see below under the media queries. */
div.wrapper-searchresults {
	display: grid;
	grid-template-areas:
	'hamburger-menu'
	'content'
	'decoration'
	'footer';
}

/************************************	
Navigation-items in the content area
*************************************/

/* Placed at the top of the content area as extra indicator which topnav menu-item is active */
div.topnav-indicator {
	color: #999999;
	margin-top: 1em;
}

/* Exception for Homepage because we don't want to show this on wider screens (see below under media queries) and extra margin */
div.topnav-indicator-home {
	color: #999999;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* For menu placed in content area */
div.pagemenu {
	display: inline-flex;
	gap: 1.7em;
	flex-wrap: wrap;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
	background-color: #def2f1;
}

/* For menu-items in menu in content area */
div.pagemenu-item {
	font-size: 1em; 
	font-weight: bold;
}

/* For secondary menu placed in content area */
div.pagemenulevel2 {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.7em;
	row-gap: 1.2em;
	margin-bottom: 2em;
}

/* For secondary menu-items in secondary menu in content area */
div.pagemenulevel2-item {
	font-size: 1em;
	font-weight: bold;
}

/* For the year list on the Publications page */
div.year-link-container {
	display: flex;
	height: 18em;
	max-width: 30em;
	gap: 1em;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 2em;
	margin-bottom: 3em;	
}

/******************************************************************	
Search from https://programmablesearchengine.google.com/
*******************************************************************/

div.searchbox {
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 10px;
	background:  #2b7a78;
	width: calc(100% - 50px); /* -50px otherwise the div becomes wider than the Header-container for some reason */
	display: none; /* Only becomes visisble on small screens after visitor has expanded hamburger menu */
}

/* On the search results page - on small screens - the search box is shown in the content div above the search results as well */
div.searchbox2 {
	margin-bottom: 0.5em;
}

/* The !important statement forces the browser the use our style instead of Google's, even when Google's style is more specific */

/* To prevent ads on the Search Results page :) */
div.gsc-adBlock {
    display: none !important;
}

/* To remove the padding left and right from the search results container */
div.gsc-control-cse {
    padding-left: 0em !important;
	padding-right: 0em !important;
}

/* Search results titles */
a.gs-title {
    font-size: 18px !important;
}

/* Search result URL's and lines of text with highlighted keywords */
div.gs-bidi-start-align {
	font-size: 16px !important;
}

/* Search results file format label */
.gs-fileFormat {
	font-size: 14px !important;
}

/* Search results file format type (e.g. PDF) */
.gs-fileFormatType {
	font-size: 14px !important;
}

/* To NOT display the yellow box around the "No Results" text in case of no search results and to show bigger letters than 13px */
.gs-no-results-result .gs-snippet {
    background-color: transparent !important;
	border: none !important;
	font-size: 18px !important;
	font-weight: bold !important;
}

/* To prevent the link at the bottom of the Search Results to search also on Google - for small screens */
div.gcsc-find-more-on-google-root {
    display: none !important;
}

/* To prevent the link at the bottom of the Search Results to search also on Google - for large screens */
div.gcsc-more-maybe-branding-root {
    display: none !important;
}

/**********************************************************************	
Site Search 360 custom site search from https://www.sitesearch360.com/
***********************************************************************/

/* Positioning and sizing of the search box */
div.ss360 {
	margin-left: 25px;
	max-width: 300px;
	width: calc(100% - 50px); /* Google programmable search engine: -50px otherwise the div becomes wider than the Header-container for some reason */
	display: none; /* Only becomes visisble on small screens after visitor has expanded hamburger menu */
}

/* Making the site search 360 search box a little less heigh */
.ss360-custom-search__searchbox {
	height: 34px !important;
}

/* Making the site search 360 search button a little less heigh */
.ss360-custom-search__searchbutton {
	height: 34px !important;
}

/* To make the magnifying icon on the search button somewhat larger */
#searchButton img {
	width: 22px !important;
	height: 22px !important;
}

/* Change the color of the search button next to the search box */
.ss360-ac-bg {
	background-color: #3aafa9 !important;
}

/* Change the color of the URL's in the search results */
.ss360-suggests__url {
	color: #3aafa9 !important;
}

/*******************	
For people 
********************/

div.labmembers {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

div.pastlabmembers {
	display: flex;
	flex-direction: column;
	gap: 1em; 
}

/* Student award-winners) */
div.award-winners {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-left: 1.5em;
}

/*
div.person {
}
*/

div.headshot {
	float: left;
	margin-right: 1em;
}

div.name {
	font-weight: bold;
	margin-bottom: 0.2em;
}

div.function {
	margin-bottom: 0.2em;
}

/*
div.scholar {
}
*/

div.pedigree {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

div.pedigreebox {
	padding: 1em;
	margin-bottom: 1em;
	background-color: #eeeeee;
}

/*
div.arrow {
}
*/

/***********************************************************************	
To make the Google Maps embedded code on the Contact Us page responsive
************************************************************************/

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/*************************************************	
Hamburger menu (for small screens)
**************************************************/

/* Inspired by https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */

.hamburger-menu {
	grid-area: hamburger-menu;
    overflow: hidden;
	background-color: #2b7a78;
	position: relative;
  }

/* For the links in the menu when it's expanded and the icon link */  
.hamburger-menu a {
	color: #ffffff;
    text-align: left;
    padding-left: 35px;
	padding-bottom: 7px;
	padding-top: 7px;
    text-decoration: none;
    font-size: 1em;
	font-weight: normal;
	display: none; /* the menu is invisible until clicked on hamburger icon */
  }

/* The headertitle is also a link to Home and should always be visible */
  .hamburger-menu a.headertitle {
    display: block;
	padding: 0px;
 }

  .hamburger-menu .ham-active-item {
	font-weight: bold;
	color: #ffffff;
	padding-left: 35px;
	padding-bottom: 7px;
	padding-top: 7px;
	display: none;
  }

  .hamburger-menu .ham-header {
	color: #fcff00;
	padding-left: 25px;
	padding-bottom: 8px;
	padding-top: 25px;
	display: none;
  }

  .hamburger-menu .icon {
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
	color: #ffffff;
  }
 
  .hamburger-menu a.icon {
	float: right;
	display: block;
  }

  .hamburger-menu .close-icon {
	display: none;
  }

img.hamburger {
	width: 26px;
	height: 26px;
  }

img.close {
	width: 26px;
	height: 26px;
  }

/* All styles with .expanded are only working after visitor clicked on hamburger icon and menu is expanded */  
.hamburger-menu.expanded {
	position: relative;
	padding-bottom: 2em;
}

.hamburger-menu.expanded .icon {
	position: absolute;
	right: 0;
	top: 0;
}

.hamburger-menu.expanded .headertitle {
	float: none;
}

/* Google's Programmable Search Engine */
.hamburger-menu.expanded .searchbox {
	display: block;
}

/* Site Search 360 */
.hamburger-menu.expanded .ss360 {
	display: block;
}

.hamburger-menu.expanded .ham-active-item {
	display: block;
}

.hamburger-menu.expanded .ham-header {
	display: block;
}

.hamburger-menu.expanded a {
	display: block;
}

.hamburger-menu.expanded .close-icon {
	display: block;
  }

.hamburger-menu.expanded .open-icon {
	display: none;
  }

/*************************************************	
Styles for bigger screens using media queries
**************************************************/

/* To prevent the Google search box becoming really wide on screens just below the 940px breakpoint */
@media only screen and (min-width: 470px)  {

	div.searchbox {
		width: 340px;
	}
}	

/* To make embedded YouTube videos not too big on big screens */
@media only screen and (min-width: 620px)  {

	.video-responsive {
		padding-bottom: 315px;
	}

	.video-responsive iframe {
		max-height: 315px;
		max-width: 560px;
	}
}

@media only screen and (min-width: 940px)  {

	/* Secnav and decoration become a left sidebar */
	div.wrapper {
		grid-template-columns: 26% auto;
		grid-template-rows: auto auto auto 1fr auto; /* 1fr to position the decoration snug under the secnav */
		max-width: 1200px; 
		margin-left: auto; /* To center the wrapper */
		margin-right: auto;
		grid-template-areas: 'header header' 'topnav topnav' 'secnav content' 'decoration content' 'footer footer';
	}

	/* On the search results page there is only one column (and no secnav and decoration divs) */
	div.wrapper-searchresults {
		grid-template-columns: 26% auto;
		grid-template-rows: auto auto auto 1fr auto; /* 1fr to position the decoration snug under the secnav */
		max-width: 1200px; 
		margin-left: auto; /* To center the wrapper */
		margin-right: auto;
		grid-template-areas: 'header header' 'topnav topnav' 'content content' 'content content' 'footer footer';
	}

	/* Hamburger menu disappears */
	div.hamburger-menu {
		display: none;
	}

	div.scientist {
		grid-template-columns: max-content auto;
		grid-template-rows: auto auto 1fr;
		margin-bottom: 3em;
		grid-template-areas:
		'scientist-portrait scientist-name' 'scientist-portrait scientist-years' 'scientist-portrait scientist-writings'
	}

	div.headertitle {
		letter-spacing: 2px;
		font-size: 1.9em;
		padding-top: 25px;
		padding-right: 50px;
		padding-bottom: 25px;
		float: left;
	}

	div.searchbox {
		margin-top: 30px;
		margin-left: 0px;
		display: block;
		float: right;
	}

	/* Google's Programmable Search Engine:  On the search results page - on small screens - the searchbox is repeated in the content div above the search results. This is not necessary on large screens because the searchbox is always visible in the header. */
	div.searchbox2 {
		display: none;
	}

	/* To NOT display Site Search 360 for large screens (only for medium screens) */
	div.ss360-largescreen {
		display: none;
	}

	/* Site Search 360: Positioning and sizing of the search box */
	div.ss360 {
		display: block;
		float: right;
		margin-top: 25px;
		margin-right: 25px;
	}

	/* Removing site search 360 top and bottom padding */
	.ss360-custom-search {
		padding: 0px !important;
	}

	div.header {
		display: block;
	}

	div.topnav {
		display: block;
	}

	div.secnav {
		padding-top: 30px;
		padding-bottom: 10px;
		display: block;
	}
	
	div.secnav-wrapper {
		flex-direction: column;
		row-gap: 1.7em;
	}
	
	div.decoration {
		background-color: #def2f1;
		padding-top: 20px;
	}
	
	div.topnav-indicator-home {
		display: none;
	}

	div.content {
		padding-left: 60px;
		padding-right: 60px;
		padding-bottom: 40px;
	}
	
	div.address-home {
		display: none;
	}

	img.floatright-ifspace {
		float: right;
		margin-left: 1.5em;
		margin-bottom: 1em;
	}

	div.year-link-container {
		height: 10em;
		max-width: 100%;
	}

	div.paperwithcover {
		flex-direction: row-reverse;
		justify-content: space-between; /* Pushes the paper to the left and the cover to the right */
	 	align-items: flex-start;
		gap: 1em;
	}

	div.cover {
		flex-shrink: 0; /* Otherwise the image would shrink for some reason */
	}

	div.labmembers {
		flex-wrap: wrap;
		height: 180em; /* Increase this number to make the list longer */
	}

	div.pastlabmembers {
		flex-wrap: wrap;
		flex-direction: row;
		row-gap: 1em;
		column-gap: 0em;
	}

	div.person {
		width: 50%;
		}
}

/* To display the Site Search 360 in the topnav instead of the header */
@media only screen and (min-width: 1210px)  {

	/* To NOT display Site Search 360 for medium screens */
	div.ss360-mediumscreen {
		display: none;
	}

	/* To display Site Search 360 for large screens */
	div.ss360-largescreen {
		display: block;
	}

	/* Site Search 360: Positioning and sizing of the search box */
	div.ss360 {
		margin-top: 12px;
		margin-right: 0px;
		width: 240px;
	}	

	/* Change the color of the search button next to the search box */
	.ss360-ac-bg {
		background-color: #2b7a78 !important;
	}

}