/* CONTAINER */
                body {
                     -webkit-text-size-adjust: 100%;
               }

		#container {
			width: 1024px;
			margin: 0 auto;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
			font-size: 14px;
			font-style: normal;
			font-variant: normal;
			font-weight: 400;
			line-height: 1.5em;
		}

/* HEADER */
		
		#header {
			padding-top: 10px;
			clear: both;
			margin-bottom: 10px;
		}
		
		#header p { 
			margin-top: -20px;
			margin-left: 30px;
			color: #6E6E6E;
		}
		

/* FONTS AND THINGS */

		h1 {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-weight: normal;
			font-size: 32px;
			color: #57068c;
			margin-bottom: 30px;
			background-color: #FFF;
		}
		
		h2 {
			color: #57068c;
			font-size: 16px;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			background-color: #FFF;
		}
		
		h3 {
		   	font-size: 11px;
			font-weight: bold;	 
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		a {					 
			color:#57068c;
			text-decoration: none;
		}

		a:hover {
			color:#57068c;
			text-decoration: underline;
		}		  
		
		img.floatleft {
			float: left;
			margin: 7px 20px 0px 10px;
		}

                img.floatright {
			float: right;
			margin: 20px 0px 3px 0px;
		}

                img.fltright {
			float: right;
			margin: 0px 0px 0px 10px;
		}

                img.fltleft {
			float: left;
			margin: 0px 10px 0px 0px;
		}
/* NAVIGATION MENU */

		#menu {
			width: 1024px;
			margin-top: -5px;
			border-top: 2px solid #DDDDDD;
			border-bottom: 2px solid #DDDDDD;
			margin-bottom: 20px;
			clear: both;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 4px 10px;
		}
		
		#menu p {
			  line-height: 1.6em;
			  padding-bottom: 0px;
			  padding-top: 0px
			} 
		
		#menu a {
			line-height: 2em;
			padding-left: 10px;
			padding-right: 10px;
			color: #000000;
			font-weight: bold;	  
			text-decoration: none;
		} 
		
		#menu a:hover	{
			color: #000000;
			text-decoration: underline;
		}

		/* Separator element between links */
		#menu .sep { margin: 0 6px; color: #000; }
		
/* CONTENT ELEMENTS */

		#content {
			width: 740px;
			margin-left: 0px;
			margin-right: 180px;
		}
		
		#contentwide {
			width: 1016px;
			margin-left: 0px;
			margin-right: 0px;
		}
		
		#contentwide h1 {
			color: #57068c;
			font-size: 14px;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-weight: bold;
			background-color: #FFF;
		}

		#contentwide h4 {
			color: #57068c;
			font-size: 14px;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-weight: bold;
			background-color: #FFF;
		}
		
		#contentwide p.a {
			padding-bottom: 10px;
			border-bottom: 1px solid #DDDDDD; /* A faint grey line below the text */
		}
		
		#content p {
			padding-bottom: 10px;
			border-bottom: 1px solid #DDDDDD; /* A faint grey line below the text */
		}

		#content p.a {
			padding-bottom: 10px;
                        border-bottom: 0px;
		}


		#content ul {
			padding-bottom: 10px;				 
			width: 680px;
			margin-left: 0px;
			padding-left: 12px; 
			border-bottom: 1px solid #DDDDDD; /* A faint grey line below the text */
		}

		#content ul.a {
			padding-bottom: 10px;				 
			width: 680px;
			margin-left: 0px;
			padding-left: 12px; 
			border-bottom: 0px;
		}

		
/* SIDEBAR ELEMENTS */

		#sidebar {
			float: right;
			width: 241px;
			clear: right; /* ensures sidebar stacks below profile on desktop */
		}

/* PROFILE BLOCK (portrait + links) */
#profile {
	float: right;
	width: 241px;
	margin-bottom: 10px;
}

/* Compact inline styling for profile links with separators */
.profile-links {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.profile-links li { margin: 2px 0; }
.profile-links li + li::before {
    content: " | ";
    color: #000;
    margin: 0 6px;
}
		
		#sidebar p {
			padding-bottom: 10px;
			border-bottom: 1px dotted #CCC;
		}

/* News list formatting */
.news { list-style: none; padding-left: 0; margin: 0 0 12px 0; }
.news li { margin: 0 0 10px 0; }

/* Replace <br> spacing in list items with CSS margins */
#contentwide ol > li, #contentwide ul > li { margin: 0 0 12px 0; }
#content ol > li, #content ul > li { margin: 0 0 12px 0; }

/* Slightly larger spacing just for the publications page */
.page-publications #contentwide ol > li,
.page-publications #contentwide ul > li { margin-bottom: 14px; }
#contentwide li br, #content li br { display: none; }

/* Tighter lists on the home page (Research Interests, Teaching, Professional Service) */
.page-home #content ul.a > li,
.page-home #content ul:not(.a) > li { margin-bottom: 2px; }
.page-home #content ul.a,
.page-home #content ul:not(.a) { margin-bottom: 10px; }

/* Compact list spacing on group page to match home page lists */
.page-group #contentwide ul > li,
.page-group #contentwide ol > li { margin-bottom: 0px; }
.page-group #contentwide ul,
.page-group #contentwide ol { margin-bottom: 4px; }

/* FOOTER ELEMENTS */

		#footer {
			margin-top: 0px;
			clear: both;			 
			padding: 0px 0px 0px 0px;
		}
		
		#footer p {
			color:#6E6E6E;
			padding: 5px;			
			border-bottom: 2px solid #DDDDDD;
			text-align: left;	   
		}

/* RESPONSIVE ENHANCEMENTS */

/* Make container and menu fluid by default, capped at 1024px */
#container { max-width: 1024px; width: 100%; }
#menu { width: 100%; box-sizing: border-box; }

/* Ensure images scale down on small screens */
img { max-width: 100%; height: auto; }

/* Mobile layout adjustments */
/* Mobile collapsible nav */
.mobile-nav { display: none; }
.mobile-nav > summary { cursor: pointer; font-weight: bold; padding: 8px 0; }
.mobile-menu a { display: block; padding: 10px 0; border-bottom: 1px solid #eee; }

@media (max-width: 768px) {
	#content, #contentwide, #menu, #profile { width: 100%; margin: 0; }
	#content { margin-right: 0; }
	#sidebar, #profile { float: none; width: 100%; margin: 0 0 20px 0; }

	/* Let lists fill available width */
	#content ul, #content ul.a { width: auto; }

	/* Unfloat common image classes and center them */
	img.floatleft, img.floatright, img.fltleft, img.fltright {
		float: none; display: block; margin: 10px auto;
	}

	/* Menu links: tighter padding to allow wrapping; hide separators */
	/* Hide desktop menu; show mobile */
	#menu { display: none; }
	.mobile-nav { display: block; margin: 8px 0 12px 0; }

	/* Center profile links beneath centered image on home page */
	.page-home #profile { text-align: center; }

	/* Ensure profile image sits above links on its own line */
	.page-home #profile img { display: block; margin: 0 auto 8px; }

	/* Profile links: inline layout on mobile; break after 3rd item */
	.page-home .profile-links { display: block; }
	.page-home .profile-links li { display: inline; white-space: nowrap; }
	.page-home .profile-links li:nth-child(3)::after { content: "\A"; white-space: pre; }

	/* Tables: avoid overflow by stacking cells */
	#content table, #contentwide table { width: 100%; table-layout: auto; }
	#content table td, #contentwide table td { display: block; width: 100%; }
}

/* Extra-small phones */
@media (max-width: 480px) {
	#menu a { display: inline-flex; padding-left: 6px; padding-right: 6px; }
}

/* Reorder layout on small screens so main content precedes sidebar */
@media (max-width: 768px) {
	#container { display: flex; flex-direction: column; }
	#profile { order: 2; }
	#content { order: 3; }
	#sidebar { order: 4; }
	#footer { order: 5; }
}