/* 	Best Practice For Later:
/ 	*CSS Reset for safety reasons   -----> Normalize.css may be a better alt ((Pure. Base))
/	*Optimize your images!! -try Smush It-
/	*Use conditional comments (for browser variation)
/	*Place JS file at bottom
/	*test different browsers as you build
/	*Dont use @import, bc it's slow
*/

/*	CHECK THIS OUT:: 
	WEB FUNDAMENTALS BY GOOGLE DEV		https://developers.google.com/web/fundamentals/?hl=en */

html {
	font-family: 'Nunito', sans-serif;
	font-size: 11pt;
}
html, body, object { padding: 0; margin: 0; }
body {
	position: relative;
}

/* Main section */
main {
	padding-top: 5em;
	width: 100%;
}
/* Clear floats after the columns */
main:after {
    content: "";
    display: table;
    clear: both;
}


*, *:before, *:after {		/*solves for inheritance!*/
  box-sizing: inherit;
}

/* Prevent content from getting clipped at top or bottom */
.container {
	padding-top: 9em; 
	padding-bottom: 9em;
}

/* For more flexible spacing and tabs with paragraph elements */
/* Example use: <span class="tab1"> */ 
.tab2 {
	padding-left: 2px;
}
.tab4 {
	padding-left: 4px;
}
.tab6 {
	padding-left: 6px;
}
.tab7 {
	padding-left: 7px;
}
.tab8 {
	padding-left: 8px;
}
.tab9 {
	padding-left: 9px;
}
.tab10 {
	padding-left: 10px;
}
.tab12 {
	padding-left: 12px;
}


/*Text and line color change*/

.highlight {
	color: #004225;
	font-weight: 500;
	text-decoration:underline;
	display: inline;
}

hr {height:0.5px;
	border-width:0;
	color: #e2e2e2;
	background-color:#e2e2e2;
}

.announce {
	color: #2e6f40;	
}


/* iframe {
	display: block;
	position: fixed;
	float: left;
	overflow: hidden;

	width: 100%;
    margin: none;
    padding: none;
	border: none;
	line-height: 0;
    background: blue; 
    border: none;
} */

/* Styling for the Nav Bar */
/* object {
	display: block;
	position: fixed;
	width: 100%;
	border: none;
	margin: none;
	padding: none;
	} */

nav {
	/* height: 55px;*/
	/* display: block; */
	position: fixed;

	width: 100%;	 
	top: 10px;
	padding: 0, 0, 0, 0;
	margin: 0, 0, 0, 0;
	z-index: 9999;
	background-color: #000000; /*#50738B;*/ 
	opacity: 0.90;
	}
nav .navname {
	float: left; 
	position: absolute; 
	color: #fff;	
	font-weight: 500; 
	padding-left: 1.5em;
}
nav ul {
	text-align: right;
	margin-left: 10%;
}
nav ul li {
	display: inline;
	margin: 0 25px 0 0;
	color: #fff;
}
nav a {
	text-decoration: none;
	font-weight: 500; /*600*/
	color: white;
}
nav a:hover {
    color: #9bd46c; 
}


/* Handle general hyperlinks */
a {
	text-decoration: underline;
	font-weight: 500;
	color: #2e6f40; 
	/*color: #905739;*/  /*#7388c7   #274e6b*/
}
a:hover {
    color: #2e6f40;   /* #d1c8c0; */
}




/* Generic section */
section {
    float: right;
	width: 65%;
	margin: 0 7.0% 1.0% 1.0% ;
}
section h2 {
	color: #1f1d22; 
}
section h3 {
	color: #5c5d61; 
	margin-bottom: -8pt;	
}
section p {
	color: #5c5d61; 
}



/* Collapsing Details */
details {
	color: #5c5d61;
	padding-bottom: 4pt;
}
details[open] summary {
	color: #2e6f40;
	font-weight: 600;
}
details summary {
	font-size: 14pt;
	font-weight: 500;
	padding-bottom: 8pt;
}
section details .publication_left img {
	margin-left: 16pt;	
}
details subtitle {
	color: #2e6f40;
	font-weight: 600;
}
details authors {
	display: block;
	color: #2e6f40;
	/* font-style: italic; */
}
details description {
	display: block;
	/* margin-top: 0.5em; */
}
details related {
	display: block;
	margin-top: 1em;
	margin-bottom: 1.0em;
	color: #2e6f40;
}
details related ul.vert {
	color: #727272;
	margin-top: 0em;
	font-size: 10pt;
	list-style-type: disc;
	text-align: left;
	margin-left: 1em; 
}



/* Profile section */
.profile img{	
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	float: center; 
	min-width: 13em; 
	max-width: 17em;	
	width: 100%;		  
}
.profile {
    float: left;
	width: 20%;
	margin: 0 5% 0 2.0% ;
}
.profile h1 {
	font-weight: 500; 
	text-align: center;
	color: #2e6f40;
	font-size: 20pt;
	padding-top: 8px;
	padding-bottom: 8px;
}
.profile h2 {
	font-weight: 500; 
	text-align: center;
	color: #2e6f40;
	font-size: 20pt;
	padding-top: 8px;
	padding-bottom: 8px;
}
.profile p {
	margin-top: -0.5em; 
	text-align: center;
}
.profile ul {
	margin-left: 0; 
	margin-right: 3em; 	 
	text-align: center;
	overflow: hidden;

}
.profile ul li {
	display: inline-block;	
	margin-left: -6px;
	margin-right: -6px;
}
.profile ul li img {
	max-width: 2.8em; 
	min-width: 1.8em; 
	width: 5%; 
}


/* Publications Section */
.publication {
	/* margin: auto; */
	width: 100%;
	margin-top: -0.4em;
	margin-bottom: -0.2em;
}
.publication_left {
	float: left;
	width: 28%;	
	margin-top: 0;
	padding-top: 0;
}

.publication_left img {
	display: block;
	margin-top: 0em; /* aligns image with publication text at top */
	overflow: hidden;
	/*max-width: 18em; */ /*20em*/
	max-height: 11em;
}
.publication_right {
    float: right;
	background: #FFF; 
	width: 72%;
	padding-left: 1em; 
	margin-right: -1em; 
	padding-top: 0; 
	margin-top: -14px;
	/* padding-bottom: 1em;  */
	min-height: 12em; /*ensure text block is not smaller than image block */
}
/* Clear floats after the columns */
.publication:after {
    content: "";
    display: table;
    clear: both;
}


/* News, Blog Table Sections */
table {
	margin-left: -0.2em;
	color: #5c5d61;
}
td {
	line-height: 1.2;
}
td.month {
	text-align: left;
	color: #2e6f40;
	font-weight: 600;
	width: 34px;
}
td.year {
	text-align: right;
	color: #2e6f40;
	padding-right: 1.8em;
	font-weight: 600;
	/* width: 70px; */
}
td.break {
	text-align: center;
	color: #2e6f40;
	font-weight: 500;
	line-height: 2;
}


/* Blog Entries Section */
/* section.blog table {
	color: #5c5d61;
} */



/* Footer Section */
footer {   
	position: absolute;
	float: center;
	text-align: center;
	bottom: 0;
	width: 100%;
	bottom: 0;
}



/* Change if the viewport is 1200px or smaller */
/* Playing around wih cropping. Totally unnecessary. */
@media screen and (max-width: 1200px) {
	/*fabulous centers and constrains margin*/			
	.container 	{			
				padding-top: 0px;				
				color: #ff0000;
				margin: auto;
				}
	/* nav 		{
		font-size: 12pt;
				} */

 /* .publication_left img {
	clip-path: xywh(20% 0px 160px 20em);
	translate: -20%;
	overflow: hidden; 
}  */
			
}


/* Change if the viewport is 1000px or smaller */
@media screen and (max-width: 950px) {
	.container 	{			/*fabulous centers and constrains margin*/			
				padding-top: 250px;
				margin: auto;
				max-width: 800px; 				
				}

	/* Should increase font size to 16pt for mobile accessibility*/ 
	/* Adjust nav bar to collapse when screen is small. move about section lower to compensate */
	#about 		{
		padding-bottom: 50px;
				}
	nav 		{
		/* font-size: 12pt; */
		float: center;
				}
	nav .navname {
		display: none;
	}
	nav ul	{		
		margin-left: 0pt;
		margin-right: 0pt;
		text-align: center;
			}	
	nav ul li 	{		
		display: inline-block;
		text-align: right;
				}

	.profile 	{	
					font-size: 12pt;
					width: 90%;
					margin: 0 5% 0 5% ;
					padding-top: 4em;
				}
	.profile img{
					max-width: 13em; 	
					width: 100%;
				}				
	section 	{
					float:center;
					width: 90%;
					margin-left: 0;
					margin-right: 3%;				
				}	
	/* Publications section */
	.publication {
					padding-top: 1em;
					padding-bottom: 0;					
					/* margin-left: 0;
					margin-right: 0; */
					width: 100%;					
				}	
	.publication_left {
					float: left;
					width: 100%;
				}
				
	.publication_left img {
				float: left;
				margin-left: 0;
				padding-left: 0;
				margin-top: 0;
				clip-path: xywh(0 10% 100% 70%);
				translate: 0;
				max-width: 70%; /* ensures wide images have same width as default images */
				}
	.publication_right {
				float: left;
				width: 100%;
				padding-left: 0em; 
				margin-right: -1em; 
				margin-top: -2.5em; 
				padding-bottom: 0em; 
				min-height: 0; 
				}						
}