/******************************************************************************/
/* Define common colors */

:root {
     --header-footer-background-color: #424242; /*# 000000*/
     --content-background-color: #116291;
     --title-color: #D5A4FF;
     --text-color: #FFFFFF;
     --link-color: #00D084;
}

/******************************************************************************/
/* Style for page as a whole */

body {
     background-color: var(--header-footer-background-color);
     margin: 0;
}

/******************************************************************************/
/* Style for header */

/* Header background color */
/*header {
     background-color: #424242;
}*/

/* Flex container for the header components */
.header-flex-container {
     display: flex;
     /*background-color: var(--header-footer-background-color);*/
     width: calc(100% - 200px); /* Sets the overall width of header components to be maximum minus the margins */
     margin-left: 100px;
     margin-right: 100px;
     /*margin-bottom: 10px;*/
}

/* Header component 1 (Muller plot) */
.header-flex-item1 {
     flex-grow: 1; 
     display: flex; 
     align-items: center;
     margin-top: 10px;
}

/* Header component 2 (title and subtitle) */
.header-flex-item2 {
     flex-grow: 1;
     margin-top: 30px;
}

/* Header component 3 (Rutgers logo) */
.header-flex-item3 {
     flex-grow: 1; 
     display: flex; 
     align-items: center; 
     justify-content: flex-end;
     margin-top: 10px;
}

/* Main title in header */
h1 {
     color: var(--title-color);
     font-size: 30px;
     font-family: 'Georgia';
     font-weight: normal;
     margin-top: 10px;
     margin-bottom: 30px;
}

/* Subtitle in header */
h2 {
     color: var(--title-color);
     font-size: 18px;
     font-family: 'Helvetica';
     font-weight: 300;
}

/******************************************************************************/
/* Style for navigation bar */

nav {
     background-color: var(--header-footer-background-color);
}

/* Flex container for the header components */
.nav-flex-container {
     display: flex;
     background-color: var(--header-footer-background-color);
     width: calc(100% - 200px); /* Sets the overall width of header components to be maximum minus the margins */
     margin-left: 100px;
     margin-right: 100px;
}

/* Style The Dropdown Button */
.dropbtn {
     background-color: var(--header-footer-background-color);
     color: var(--link-color);
     padding: 16px;
     font-size: 18px;
     font-family: 'Helvetica';
     border: none;
     cursor: pointer;
}

.dropbtn a {
     color: var(--link-color);
     font-size: 18px;
     font-family: 'Helvetica';
     text-decoration: none;
     display: block;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
     position: relative;
     display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
     display: none;
     position: absolute;
     background-color: var(--header-footer-background-color);
     min-width: 180px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
     color: var(--link-color);
     font-size: 18px;
     font-family: 'Helvetica';
     padding: 12px 16px;
     text-decoration: none;
     display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
     background-color: #f1f1f1
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
     display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
     background-color: #3e8e41;
}

/*
.nav-table {
     border: 2px solid var(--title-color);
     width: 100%;
}

.nav-item {
     font-size: 18px;
     font-family: 'Helvetica';
     color: var(--link-color);
     text-align: center;
}
*/

/******************************************************************************/
/* Style for content */

/*
.body-content {
     background-color: var(--content-background-color);
     margin-left: 100px;
     margin-right: 100px; 
     color: var(--text-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: 300;
}
*/

/* Flex container for the body components */
.content-wide {
     background-color: var(--content-background-color);
     width: 100%;
     /*margin-top: -20px;*/
}


/* Flex container for the body components */
.content-narrow-container-flex {
     background-color: var(--content-background-color);
     display: flex;
     width: calc(100% - 200px); /* Sets the overall width of header components to be maximum minus the margins */
     margin-left: 100px;
     margin-right: 100px;
     padding-bottom: 10px;
     padding-top: 10px;
}

/* Non-flex container for the body components */
.content-narrow-container {
     background-color: var(--content-background-color);
     width: calc(100% - 200px); /* Sets the overall width of header components to be maximum minus the margins */
     margin-left: 100px;
     margin-right: 100px;
     padding-bottom: 10px;
     padding-top: 10px;
}

.content-flex-item {
     flex: 1;
}

/* Style for content headings */
h3 {
     color: var(--title-color);
     font-size: 30px;
     font-family: 'Helvetica';
     font-weight: bold;
     text-align: center;
}

/* Style for content subheadings */
h4 {
     color: var(--title-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: bold;
}

/* Style for regular content text */
p {
     line-height: 1.5;
     margin-bottom: 25px;
     font-size: 20px;
     color: var(--text-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: 300;
}

p.small {
     font-size: 15px;
     margin-bottom: 0px;
}

b {
     font-weight: 1000;
}

/* Style for regular content unordered lists */
ul {
     line-height: 1.5;
     /*margin-bottom: 50px;*/
     font-size: 20px;
     color: var(--text-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: 300;
}

/* Style for regular content ordered lists */
ol {
     line-height: 1.5;
     margin-bottom: 50px;
     font-size: 20px;
     color: var(--text-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: 300;
}

/* Style for list of news items on home page, with a little extra space between lines */
ul li.homepage {
     margin-bottom: 10px;
}

/* Style for content links */
a {
     color: var(--link-color); 
     text-decoration: none; 
}

/* Style for content table */
td {
     line-height: 1.2;
     font-size: 20px;
     color: var(--text-color);
     font-size: 20px;
     font-family: 'Helvetica';
     font-weight: 300;
     vertical-align: top;
     padding-bottom: 20px;
}

.float-image-left {
     float: left;
     margin-bottom: 10px;
     margin-right: 10px;
     margin-left: 0;
     margin-top: 0;
}

.float-image-right {
     float: right;
     margin-bottom: 10px;
     margin-left: 10px;
     margin-right: 0;
     margin-top: 0;
}

/******************************************************************************/
/* Footer */

.footer-content {
     margin-left: 100px;
     margin-right: 100px;
     color: var(--title-color);
     font-size: 20px;
     font-family: 'Helvetica';
}