/******** CSS FOR RESEARCH PAGE *********/
body {
   font-family: Helvetica, Verdana, Arial, sans-serif; 
   font-size: medium;
   background-color: #fafafc;
   padding: 0px;}
h1 {
   color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 26px; }
h2 {
   color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 24px; }
h3 { color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 20px; }
h4 { color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 18px; }
h5 { color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 16px; }
h6 { color: #000000;
   font-family: Helvetica;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 14px; }
p {
   font-family: Times;
   font-size: medium;
   line-height: 1.5em;
   padding-left: 10px;
   padding-right: 10px;
   margin-top: 0px;   
   margin-right: 0px; 
   margin-bottom: 1.5em; /* This adds a full line-space of gap */   
   margin-left: 0px;
   color: #000000;
   } 
.line {
   border-bottom: 1px dotted #797979;
   }
.welcometitle {
   color: #ffffff;
   font-family: Helvetica;
   font-size: 120%;
   font-weight: bold;
   line-height: 1.5em;
   letter-spacing: 0.04em;
   padding: 106px;
   padding-left: 57px;
   padding-right: 589px;
   padding-top: 106px;
   padding-bottom: 0px;
   }
.welcome {
   color: #ffffff;
   font-family: Arial;
   font-size: 14px;
   line-height: 1.5em;
   letter-spacing: 0.02em;
   padding: 106px;
   padding-left: 57px;
   padding-right: 589px;
   padding-top: 10px;
   padding-bottom: 86px;
   }
blockquote {
   font-family: Georgia, serif;
   font-size: 18px;
   font-style: italic;
   text-align: justify;
   text-justify: inter-word;
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
   width: 410px;
   margin-left: auto;
   margin-right: auto;
   padding: 0.25em 20px;
   line-height: 1.45;
   position: relative;
   color: #383838; }
blockquote:before {
   display: block;
   content: "\201c";
   position: absolute;
   font-size: 80px;
   margin-top: 5px;
   left: -20px;
   top: -20px;
   color: #7a7a7a; }
blockquote cite {
   color: #999999;
   font-size: 14px;
   display: block;
   margin-top: 5px; 
   margin-bottom: 5px;
   }
blockquote cite: before {
   content: "\2014 \2009"; }

/* urls and hyperlinks */
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited {color: #000000; text-decoration:none;}
h1 a:hover, h2 a:hover, h3 a:hover {color: red; text-decoration:none;}
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {color: blue; text-decoration:none;}
h4 a:hover, h5 a:hover, h6 a:hover {color: red; text-decoration:none;}
a:link {color:blue; text-decoration:none}
a:visited {color:gray; text-decoration:none}
a:hover {color:red; text-decoration:none}

/* header */
#allcontent {
   width: 980px;
   padding-top: 0px;
   padding-bottom" 0px;
   background-color: #ffffff;
   margin-left: auto;
   margin-right: auto;
   }
#header {
   width: 980px;
   height: 99px;
   margin: 0 auto;
   position: relative; /* Useful if you want to overlay social buttons later */
   display: block;    /* Ensures it takes up its own line at the top */
}
#header img {
   display: block;
   width: 100%;
   height: auto;
}
#header #socialmediabuttons {
   float: right;
   margin-right: 0px;
   text-align: right;
   display: inline;
   margin-top: 34px;
   }
#header #socialmediabuttons ul {
   display: inline;
   width: 100px;
   }   
#header #socialmediabuttons ul li {
   display: inline;
   float: left;
   margin: 0px;
   padding: 0px;
   }
#header #socialmediabuttons img {
   float: left;
   display: inline;
   margin: 0px;
   padding-left: 10px;
   }
br.clear {
   clear: both;
   }

/* navigation menu */
#nav {
   background: #000;
   padding-top: 6px;
   padding-bottom: 6px;
   }
#mainnav {
   background: #000;
   padding: 8px;
   border: 1px #727272 solid;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 5px;
   margin-right: 5px;
   text-align: center;
   }
#mainnav li {
   display: inline;
   }
#mainnav li a {
   color: #fff;
   font-size: small;
   font-weight: bold;
   letter-spacing: 0.06em;
   margin: 0 5px;
   text-transform: uppercase;
   }
#mainnav li a:hover {
   color: #479CDF;
   }

/* main content and sidebars */
#borderwrapper-outer {
   float: left;
   background-color: #daf0fd;
   padding: 5px;
   margin: 0px;
   }
#borderwrapper-inner {
   float: left;
   background-color: #daf0fd;
   padding: 10px;
   border: 1px #727272 solid;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;
   }
#biopanel {
   width: 980px;
   height: 310; 
   text-align: left;
   padding: 0px;
   margin: 0px;
   font-size: small;
}
#main {
   float: left;
   background-color: #daf0fd;
   max-width: 980px;
   text-align: left;
   padding-top: 5px;
   border: 0px;
   margin-right: 5px;
   font-size: small;
   }
#right {
   float: left;
   background-color: #daf0fd;
   width: 316;
   text-align: left;
   padding-top: 0px;
   border: 0px;
   margin-right: 0px;
   margin-left: 16px;
   font-size: small;
   }


/**********************************************************/
/* footer */
/**********************************************************/

#footer {
   background: #000;
   padding-top: 6px;
   padding-bottom: 6px;
   }
#footernav {
   background: #000;
   padding-top: 6px;
   padding-bottom: 6px;
   }
#footernav {
   background: #000;
   padding: 8px;
   border: 1px #727272 solid;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 5px;
   margin-right: 5px;
   text-align: center;
   }
#footernav li {
   display: inline;
   }
#footernav li a {
   color: #fff;
   font-size: small;
   font-weight: bold;
   letter-spacing: 0.06em;
   margin: 0 15px;
   }
#footernav li a:hover {
   color: #479CDF;
   }
#copyright {
   text-align: center;
   clear: both;
   }

/* images and image properties */
.align-left {
   float: left;
   margin: 5px 20px 15px 0; 
}

.align-right {
   float: right;
   margin: 5px 0 15px 20px;
}

.align-center {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

/* Styling for content-specific unnumbered lists */
.bio-list {
   font-size: 16px; /* Increased from your default small/medium size */
   line-height: 1.5em;
   padding-left: 30px; /* Provides a nice indent for the bullets */
   margin-bottom: 10px;
   color: #000000;
   font-family: Helvetica, Arial, sans-serif;
}

.bio-list li {
   margin-bottom: 8px; /* Adds slight space between each bullet point */
}

/* Container for the feedback section */
.feedback-container {
    margin: 30px 0;
}

/********** Quote Boxes *************/
.professional-quote {
    /* Fixed width for perfect consistency */
    width: 80%;                
    margin: 40px auto;         /* Centers the box perfectly */
    
    /* Internal Spacing */
    padding: 30px 40px 25px 65px; /* Extra left padding for the quote mark */
    
    background-color: rgba(255, 255, 255, 0.4);
    
    /* Structural Borders */
    border-left: 5px solid #9bbcd3;  /* Slightly thicker for more "gravitas" */
    border-right: 1px solid #c8d6e0; /* The "containment" line you requested */
    
    position: relative;
    box-sizing: border-box;    /* Crucial: keeps padding inside the 80% width */
}

/* The Quotation Mark */
.professional-quote::before {
    content: "\201C"; 
    font-family: 'Georgia', serif;
    font-size: 3.5rem;          
    color: #AEAFB0;            /* Your requested gray */
    position: absolute;
    left: 15px;                
    top: -5px;
    line-height: 1;            /* Prevents the mark from adding extra height */
}

.professional-quote p {
    margin: 0 0 15px 0;
    font-style: italic;
    color: #333;
    font-size: 1.05rem;
    line-height: 1.7;          /* Increased for a more "airy," professional feel */
}

.professional-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #7a9cb5;
    text-align: right;         
}
.publications-section {
    width: 85%; /* Keeping it consistent with your quote blocks */
    margin: 40px auto;
}

.pub-item {
    display: flex;
    margin-bottom: 35px;
    padding-bottom: 15px;
}

.pub-year {
    flex: 0 0 70px;
    font-weight: bold;
    color: #7a9cb5;
    font-size: 1.1rem;
    border-right: 1px solid #d1dce5; /* A thin vertical divider */
    margin-right: 20px;
}

.pub-content {
    flex: 1;
}

.pub-citation {
    margin: 0 0 10px 0;
    line-height: 1.6;
    color: #222;
}

/**************** The "Distinction" Styling for TRAILS ********************/

/* Toning down the Year Dates */
.pub-year {
    flex: 0 0 60px;
    font-weight: 400;     /* Light weight - not bold */
    color: #94a3b8;      /* Muted slate grey */
    font-size: 1.05rem;
    padding-top: 2px;
}

/* Styling for the Distinction Notes */
.distinction-note {
    font-size: 0.92rem;
    color: #64748b;      /* Muted slate for the body text */
    margin: 6px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.distinction-note::before {
    content: "›"; 
    color: #9bbcd3;
    position: absolute;
    left: 0;
    font-size: 1.4rem;
    line-height: 1;
    top: -2px;
}

/* The Label: Medium-Dark Grey for Professional Emphasis */
.distinction-note strong {
    color: #5e6a75;      /* Medium-dark grey (toned down from black) */
    font-weight: 600;    
    margin-right: 4px;
}

/* Journal Highlight - Softened background tint */
.journal-highlight {
    background-color: rgba(218, 240, 253, 0.25); /* Very subtle blue tint */
    padding: 6px 12px 6px 25px;
    border-radius: 4px;
    margin-left: -5px;
}

.journal-highlight::before {
    left: 8px; /* Corrects arrow position inside the tinted box */
}

/* Link Styling */
.pub-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #7a9cb5;
    text-decoration: none;
}

.pub-link:hover {
    text-decoration: underline;
}