/* GENERAL STYLES */
body { background-color:#F3F3F3; font-family:verdana,arial,sans-serif; margin:0; min-width:230px; padding:0; }
td { vertical-align:top; }
img { border:0; }
a { color:#006633; overflow-wrap:break-word; }
a:hover, a:focus { text-decoration:none; }
abbr { text-decoration:none; }
sup { font-size:0.75rem; }
.highlightText { font-size:1.2rem; }
p.highlightText { line-height:1.6rem; }
.fileInfo { font-size:0.9rem; font-style:italic; white-space:nowrap; }
.addInfo { font-size:0.9rem; font-style:italic; }
.caption { font-size:0.8rem; font-style:italic; line-height:1.4rem; }
.systemText, .systemText td { color:#666666; font-style:italic; }
.errorText { color:#FF0000; }
.nowrap { white-space:nowrap; }
.double > li { margin-bottom:1rem; }
.double > li > ul { margin-top:6px; }
.breadCrumbs { font-size:0.9rem; font-style:italic; margin:1.5em 0; }
.imgBorder { border:1px solid #9A9A9A; }
.imgPlaceholder { background-color:#E3E3E3; border:1px solid #9A9A9A; }
.leftAlign, .rightAlign { clear:both; }
.leftAlign > img,                                        /* image only */
.leftAlign > span { float:left; margin:0 25px 25px 0; }  /* image and caption; both enclosed with a SPAN tag */
.rightAlign > img,
.rightAlign > span { float:right; margin:0 0 25px 25px; }
.leftAlign > span img,
.rightAlign > span img { display:block; float:none; margin:0 0 4px; }
.clearBefore::before,
.clearAfter::after { clear:both; content:""; display:block; height:0; visibility:hidden; }
.hide { left:-9999rem; position:absolute; }  /* hide content meant for screen readers */



/* WEBSITE HEADER */
body > header { background-color:#004712; margin:0 auto; position:relative; max-width:1300px; }
body > header .logoWrapper { height:48px; margin-right:309px; }
body > header .logo { box-sizing:border-box; height:auto; padding:8px 10px; width:100%; }
body > header .logo svg { fill:#FFFFFF; max-height:32px; vertical-align:middle; }
body > header .logo svg .ndsuLogo { fill:#FFC82E; }
body > header .programName { background-color:#1F1F1F; border-bottom:1px solid #333333; color:#FFFFFF; font-size:210%; padding:12px; }
body > header .programName > a { background-color:#1F1F1F; color:#FFFFFF; text-decoration:none; }
body > header .programName > a:hover { text-decoration:underline; }
body > header .headerImage { background-color:#000000; background-position:50% 40%; background-repeat:no-repeat; background-size:cover; min-height:260px; position:relative; }
@media (max-width:700px) {
    body > header .logoWrapper { margin-right:0; }
}
@media (max-width: 430px) {
    body > header .logo { height:auto; width:90%; }
}


/* MAIN WEBSITE NAVIGATION */
body > header > nav { background-color:#000000; color:#FFFFFF; font-size:120%; }
body > header > nav > .wrapper > .button_menuOpen { display:none; }
body > header > nav > .wrapper ul { display:block; list-style:none; margin:0; padding:0; }
body > header > nav > .wrapper > ul li { display:inline-block; position:relative; }
body > header > nav > .wrapper > ul li a { color:#FFFFFF; display:inline-block; font-size:90%; padding:10px 14px; text-decoration:none; vertical-align:bottom; }
body > header > nav > .wrapper > ul > li > a:hover { text-decoration:underline; }
body > header > nav > .wrapper > ul > li > a span { color:#999999; display:block; font-size:80%; font-style:italic; }
body > header > nav > .wrapper > ul ul { background-color:#FFFFFF; border:1px solid #EEEEEE; border-width:0 1px 1px; border-left:4px solid #000000; box-shadow: 2px 2px 0.6rem #545454, -2px 2px 0.6rem #545454; left:-999rem; position:absolute; }
body > header > nav > .wrapper > ul ul.show { left:0; }
body > header > nav > .wrapper > ul ul li { display:block; }
body > header > nav > .wrapper > ul ul li a { border-top:1px solid #EEEEEE; color:#000000; display:block; padding:10px; width:200px; }
body > header > nav > .wrapper > ul ul li a:hover { background-color:#000000; color:#FFFFFF; }
body > header > nav > .wrapper > #ugptiTools { position:absolute; right:0; top:0; }
body > header > nav > .wrapper > #ugptiTools > p { left:-999rem; position:absolute; }
body > header > nav > .wrapper > #ugptiTools #globalSearch { display:inline-block; position:static; max-width:300px; width:300px; }
body > header > nav > .wrapper > #ugptiTools #globalSearch > div { background-color:transparent; border:0; padding:9px 9px 0 0; }
body > header > nav > .wrapper > #ugptiTools #globalSearch form { background-color:#FFFFFF; }
body > header > nav > .wrapper > #ugptiTools #globalSearch .gsc-input { padding:0; }
body > header > nav > .wrapper > #ugptiTools #globalSearch button { background-color:transparent; border:0; margin-right:2px; padding:6px 8px; }
body > header > nav > .wrapper > #ugptiTools #globalSearch button svg { fill:#000000; height:19px; width:19px; }
body > header > nav > .wrapper > #ugptiTools #globalSearch button:hover { background-color:#DBDBDB; }
body > header > nav > .wrapper > #ugptiTools > .tools { left:-999rem; position:absolute; }  /* TEMP code - working to position search field */
body > header > nav > .wrapper > #ugptiTools > .tools > div { cursor:pointer; }
@media (max-width:700px) {
    /* GENERAL STYLES FOR THE MOBILE NAVIGATION MENU (CLOSED) */
    body > header > nav.mobileMenu > .wrapper { margin-right:50px; position:relative; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen { display:inline-block; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen a { border:1px solid #DBDBDB; border-radius:4px; color:#DBDBDB; display:inline-block; font-size:75%; margin:8px 10px; padding:10px 25px; text-decoration:none; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen a svg { display:block; height:20px; margin:0 auto; padding-top:10px; width:30px; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen a svg line { stroke:#DBDBDB; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen a:hover { background-color:#353535; color:#FFFFFF; }
    body > header > nav.mobileMenu > .wrapper > .button_menuOpen a:hover svg line { stroke:#FFFFFF; }
    body > header > nav.mobileMenu > .wrapper > ul { left:-999rem; position:absolute; }
    body > header > nav.mobileMenu > .wrapper > #ugptiTools { left:-999rem; right:auto; }
    body > header > nav.mobileMenu > .wrapper > #ugptiTools #globalSearch { max-width:none; }
    body > header > nav.mobileMenu > .wrapper > #ugptiTools #globalSearch.hide { position:absolute; }

    /* STYLES TO APPLY WITH THE USER CLICKS THE MENU BUTTON (OPEN) */
    body > header > nav.mobileMenu.open > .wrapper > .button_menuOpen { position:static; }
    body > header > nav.mobileMenu.open > .wrapper > .button_menuOpen a { background-color:#DBDBDB; border-bottom:0; border-radius:4px 4px 0 0; color:#000000; margin-bottom:0; }
    body > header > nav.mobileMenu.open > .wrapper > .button_menuOpen a:hover { background-color:#EEEEEE; }
    body > header > nav.mobileMenu.open > .wrapper > .button_menuOpen a svg line { stroke:#000000; }
    body > header > nav.mobileMenu.open > .wrapper > ul { background-color:#DBDBDB; display:block; position:static; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li { display:block; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li > a { border-bottom:1px solid #EEEEEE; color:#000000; display:block; padding:15px 10px; width:auto; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li > a span { color:#000000; display:inline; font-size:inherit; font-style:normal; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li > a:hover { background-color:#EEEEEE; text-decoration:none; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li svg { display:inline-block; height:12px; padding-left:5px; vertical-align:middle; width:12px; }
    body > header > nav.mobileMenu.open > .wrapper > ul ul { margin-right:0; left:-999rem; position:absolute; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools { background-color:#353535; padding:20px 15px; position:static; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > p { font-size:90%; margin:0; padding-bottom:10px; position:static; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools #globalSearch { padding-bottom:10px; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools #globalSearch > div { background-color:#353535; border:0; padding:0; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools #globalSearch input { min-height:23px; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools #globalSearch button:hover { background-color:#EEEEEE; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools { position:static; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div { background-color:#1A1A1A; border:1px solid #C4C4C4; border-radius:2px; display:inline-block; font-size:90%; margin:5px 10px 5px 0; text-align:center; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div:hover { background-color:#000000; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div a { color:#FFFFFF; display:inline-block; padding:12px; text-decoration:none; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div svg { fill:#FFFFFF; height:20px; width:20px; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div #svg_sitemap .connectors { fill:#565656; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div #svg_checkbox .box { fill:#565656; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > div span { display:block; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > #globalSearchToggle { padding:12px; }
    body > header > nav.mobileMenu.open > .wrapper > #ugptiTools > .tools > #globalSearchToggle.optionalHide { display:none; }

    /* STYLES TO APPLY WHEN A NAVIGATION OPTION (E.G., ABOUT US) IS CLICKED (OPEN) */
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand > a { border:0; background-color:#353535; color:#FFFFFF; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand > a span { color:#FFFFFF; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand > a svg line { stroke:#FFFFFF; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand a:hover { background-color:#000000; border-color:#000000; color:#FFFFFF; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand ul { border-width:1px 0; position:static; }
    body > header > nav.mobileMenu.open > .wrapper > ul > li.expand ul a { background-color:#EEEEEE; border:0; border-bottom:1px solid #DADADA; color:#000000; padding-left:30px; width:auto; }
}


/* MAIN WEBSITE CONTENT */
#pgWrapper { margin:0 auto; max-width:1300px; }
main { background-color:#FFFFFF; border:1px solid #DBDBDB; border-width:0 1px; min-height:210px; padding:30px; }
main h1 { font-size:180%; font-weight:bold; color:#004712; margin-top:0; padding-bottom:5px; border-bottom:#004712 2px solid; }
main h1 > span { display:inline-block; font-size:75%; padding-bottom:3px; }
main h2 { font-size:130%; font-weight:bold; color:#004712; margin-top:2rem; }
main h3 { font-size:110%; font-weight:bold; margin-top:2rem; }
main h2.first, main h3.first { margin-top:1rem; }  /* used when header appears right after another header */
main p { line-height:1.4rem; }
main li { line-height:1.4rem; margin-bottom:0.25rem; }
main fieldset { border:1px solid #DBDBDB; border-radius:3px; margin:2rem 0; }
main fieldset legend { font-size:1.1rem; font-weight:bold; color:#083717; padding:0 10px; }
main fieldset div { padding:0 1rem 0.5rem; }
main fieldset h2,
main fieldset h3 { color:#000000; font-size:1rem; }
@media (max-width:1300px) {
    main { border:0; }
}


/* WEBSITE FOOTER */
body > #pgWrapper > .wrapper > footer { background-color:#222222; border-top:1px solid #DBDBDB; color:#FFFFFF; line-height:1.4rem; padding:2rem 30px; }
body > #pgWrapper > .wrapper > footer a { color:#FFFFFF; }
body > #pgWrapper > .wrapper > footer > .footerLinks { margin-bottom:1rem; }
body > #pgWrapper > .wrapper > footer > address { font-style:normal; }
body > #pgWrapper > .wrapper > footer > .copyright { margin-top:1rem; }



/* SPOTLIGHT SECTION */
#spotlightEntries { background-color:#EDF1EF; clear:both; margin:2rem -30px; padding:2rem 30px; }
#spotlightEntries > h2 { margin-top:0; }
#spotlightEntries > ul { display:grid; gap:20px; grid-template-columns:repeat(4, 1fr); list-style:none; margin:0; padding:0; }
#spotlightEntries > ul > li { background-color:#FFFFFF; border:1px solid #E3E3E3; display:grid; gap:0; grid-row:span 4; grid-template-rows:subgrid; margin:0; overflow:hidden; padding:0; }
#spotlightEntries > ul > li .imgPlaceholder { border:1px solid #E3E3E3; border-width:0 0 1px; overflow:hidden; }
#spotlightEntries > ul > li .imgPlaceholder img { margin:-25px 0; width:100%; }
#spotlightEntries > ul > li .posted { color:#666666; font-size:0.8rem; font-style:italic; padding:10px 10px 0; }
#spotlightEntries > ul > li .posted .pin { background-color:#666666; border-radius:4px; color:#FFFFFF; margin-right:8px; padding:1px 5px; }
#spotlightEntries > ul > li .title { font-size:1rem; font-weight:bold; padding:5px 10px 10px; }
#spotlightEntries > ul > li .content { font-size:0.9rem; padding:0 10px 10px; }
#spotlightEntries .actionButton { margin:2rem 0 0; }
@media (max-width:800px) {
    #spotlightEntries > ul { grid-template-columns:repeat(2, 1fr); }
}


/* LEGACY SPOTLIGHT SECTION */
#spotlight { background:#000000 url("https://www.ugpti.org/images/spotlightBack1.jpg") no-repeat top right; border-radius:2px; clear:both; color:#FFFFFF; margin:1rem 0 0 3px; padding:0; width:calc(100% - 6px); }
#spotlight h2 { border:0; margin:0 0 1rem; text-align:right; padding:0 23px 0 0; }
#spotlight h2 svg { display:inline-block; padding:30px 15px 0 0; }
#spotlight h2 svg path { filter:drop-shadow(1.5px 1.5px 0px rgb(0 0 0 / 0.9)) drop-shadow(-1px -1px 3px rgb(0 0 0 / 0.9)); }
#spotlight h2 svg.head1 { width:270px; }
#spotlight h2 svg.head1 path { fill:#F1BB29; }
#spotlight h2 svg.head2 { width:100px; }
#spotlight h2 svg.head2 path { fill:#DBDBDB; }
#spotlight ul { list-style:none; margin:30px; padding:0; }
#spotlight li { clear:both; margin:0 0 2.5rem 120px; padding:0; }
#spotlight p { margin:30px; padding:0; } /* used for database connection error */
#spotlight a { color:#FFFFFF; }
#spotlight .title { border-bottom:1px solid #c19b18; color:#E2D29A; font-weight:bold; margin:0 0 2px; padding:0 0 2px; }
#spotlight .title > .image { background-size:cover; background-position:50%; border:0; border-radius:3px; float:left; height:91px; margin:0 0 0 -120px; width:99px; }
#spotlight .title a { color:#E2D29A; font-weight:bold; text-decoration:none; }
#spotlight .title a:hover { text-decoration:underline; }
#spotlight .pin { background-color:#205022; border-radius:4px; margin-right:5px; padding:1px 5px; }
#spotlight .posted { color:#CCCCCC; font-size:70%; font-style:italic; margin:0 0 8px; }
#spotlight .moreInfo { font-size:80%; }
#spotlight .moreInfo a { margin:0 2px; }
#spotlight .actions { clear:left; margin:0 30px 20px; padding:1.5rem 0; text-align:right; }
#spotlight .actions img { border:0; float:none; height:68px; vertical-align:middle; }
@media (max-width: 500px) {
    #spotlight { margin:0; }
    #spotlight h2 svg.head2 { padding-top:0; }
    #spotlight li { margin-left:0; }
    #spotlight .title .image { float:none; height:auto; margin:0 0 5px; min-height:250px; width:100%; }
}
@media (max-width: 350px) {
    #spotlight h2 { margin:0 10px 1rem; }
    #spotlight h2 svg.head1 { width:100%; }
    #spotlight h2 svg.head2 { padding:0; }
}



/* STANDARD TWO-COLUMN LAYOUT */
.layout_split { clear:both; display:grid; gap:0 40px; grid-template-columns:1fr 1fr; margin-top:1rem; overflow:auto; }
.layout_split iframe { border:0; margin-bottom:2rem; min-height:248px; width:100%; }
.layout_split > div > :first-child { margin-top:10px; }
@media (max-width:800px) {
    .layout_split { grid-template-columns:1fr; }
    .layout_split > div             > :first-child { margin-top:2rem; }
    .layout_split > div:first-child > :first-child { margin-top:1rem; }
}

/* CUSTOMIZE LAYOUT -- SMALLER RIGHT COLUMN (e.g., TLN contacts by state page) */
.layout_split.narrow { grid-template-columns:1fr 390px; }
@media (max-width:1000px) {
    .layout_split.narrow { grid-template-columns:1fr; }
    .layout_split.narrow > div             > :first-child { margin-top:2rem; }
    .layout_split.narrow > div:first-child > :first-child { margin-top:1rem; }
}

/* CUSTOMIZE LAYOUT -- TYPICALLY USED WITH .subMenu (e.g., CTIPS project details page) */
.layout_split.sideMenu { grid-template-areas:"content sideBar"; grid-template-columns:3fr minmax(200px, 1fr); }
@media (max-width:700px) {
    .layout_split.sideMenu { grid-template-areas:"content" "sideBar"; grid-template-columns:1fr; row-gap:2rem; }
}
@media (max-width:800px) {  /* override original styling */
    .layout_split.sideMenu > div > :first-child { margin-top:10px; }
}



/* TYPICALLY USED FOR RELATED LINKS */
.subMenu { border:1px solid #CCCCCC; margin-bottom:1rem; }
.subMenu h2 { background-color:#155726; color:#FFFFFF; font-weight:bold; font-size:100%; padding:5px; margin:0; }
.subMenu ul { margin:7px 9px 9px 27px; padding-left:0; }
.subMenu li { margin-bottom:0.3rem; }
.subMenu div { margin:1rem; }
.subMenu p { margin:1rem; }
.subMenu.highlight { background:linear-gradient(-20deg, #4A7B57, #135324); border-color:#155726; color:#FFFFFF; }
.subMenu.highlight h2 { background-color:#155726; }
.subMenu.highlight ul { margin:10px 12px 12px 30px; }
.subMenu.highlight a { color:#FFFFFF; }
.subMenu.highlight .highlightText { font-weight:bold; }
.subMenu.highlight .fileInfo { color:#CDCDCD; font-size:70%; }
.subMenu.noBullet ul { list-style:none; margin:0; padding:0; }
.subMenu.noBullet ul li { margin:0; padding:0; }
.subMenu.noBullet ul a { border-top:1px solid #075007; clear:both; display:block; padding:10px 10px; text-decoration:none; }
.subMenu.noBullet li:first-child a { border:0; }
.subMenu.noBullet ul a:hover { background-color:#075007; }
.subMenu.noBullet .highlightText .fileInfo { font-size:70%; font-weight:normal; }
.subMenu.noBullet img { float:right; vertical-align:middle; }


/* DETAILS LAYOUT -- TWO-COLUMN LAYOUT TO ALIGN FIELD LABELS AND THE CORRESPONDING VALUES (e.g., CTIPS project details page) */
.layout_details { display:grid; gap:0px 5px; grid-template-columns:minmax(150px, 1fr) 3fr; overflow:auto; }
.layout_details div { padding:5px; }
.layout_details > div:nth-child(odd) { background-color:#F5F5F5; border:1px solid #CCCCCC; border-width:0 1px 1px 0; text-align:right; }
.layout_details > div:first-child { border-top:1px solid #CCCCCC; }
.layout_details > div > ul { margin:0 0 0 1.2rem; padding:0; }



/* STANDARD PAGE IMAGE (typically used to add visual interest to text-heavy pages) */
main .standardPageImage img { display:block; height:auto; max-width:450px; min-width:200px; width:100%; }
main .standardPageImage.legacy img { max-width:300px; }  /* size override for legacy images */
main .standardPageImage > img { clear:both; float:right; margin:0 0 10px 10px; width:50%; }  /* image only; no SPAN tag because there's no caption */
main .standardPageImage > span { clear:both; display:block; float:right; font-size:80%; font-style:italic; margin:0 0 10px 10px; max-width:450px; min-width:200px; width:50%; }  /* image and caption; both enclosed with a SPAN tag */
main .standardPageImage > span img { margin-bottom:4px; }
@media (max-width:400px) {
    main .standardPageImage > img,
    main .standardPageImage > span { float:none; margin:0 0 1rem; max-width:none; width:100%; }
}


/* INFO TOGGLE BOXES (e.g., CTIPS project Word files) */
details summary { color:#006633; cursor:pointer; text-decoration:underline; width:fit-content; }
details summary:hover,
details summary:focus { text-decoration:none; }
details[open] summary { margin-bottom:8px; }
details > div { background-color:#F5F5F5; margin-left:1rem; padding:5px 20px; }
details > div ul { padding-left:1.5rem; }
details > div p { margin-top:2rem; }
details.showHide summary::before { content:"Show "; }              /* custom styling -- automatically adds show/hide text within the summary tag */
details.showHide[open] summary::before { content:"Hide "; }
details.noMark summary::marker { content:""; }                     /* custom styling -- hide marker */
details.noMark summary::-webkit-details-marker { display: none; }  /* hide marker in Safari */


/* MESSAGE BOX (typically used to display database connection / query errors) */
main .msgBox { background-color:#FEFDFA; border:1px solid #000000; border-width:1px 4px; padding:1.5rem; margin:2.5rem 1rem; font-size:120%; }
main .msgBox p { margin:1rem 0 0; font-weight:bold; }
main .msgBox p:first-child { margin:0; }
main .msgBox .normal { color:#000000; font-style:normal; font-weight:normal; }
main .msgBox ul { margin:0.5rem 0 0 45px; padding:0; }
main .msgBox li { margin:0.25rem 0 0; }
main .msgBox li:first-child { margin:0; }
main .msgBox.error p { color:#FF0000; }                                          /* custom styling -- msgBox also flagged as an error box */
main .msgBox.normal p { color:#000000; font-style:normal; font-weight:normal; }  /* custom styling -- msgBox also flagged as a normal box */

/* CUSTOM STYLING (used for page filter options; e.g., PI page of the CTIPS key personnel directory) */
main .msgBox.filterBox { background-color:#F1F1F1; border:0; border-radius:4px; font-size:90%; margin-left:0; margin-right:0; padding:10px; }
main .msgBox.filterBox p { font-size:80%; font-style:italic; font-weight:normal; margin:0; margin-bottom:10px; }
main .msgBox.filterBox label { margin-right:15px; }
main .msgBox.filterBox select { background-color:#FFFFFF; border:1px solid #9A9A9A; border-radius:3px; cursor:pointer; max-width:130px; }
main .msgBox.filterBox input[type="submit"] { background-color:#FFFFFF; border:1px solid #9A9A9A; border-radius:3px; cursor:pointer; filter:drop-shadow(1px 1px 2px #808080); padding:2px 9px; }
main .msgBox.filterBox input[type="submit"]:hover { background-color:#004712; border-color:#1F1F1F; color:#FFFFFF; }
main .msgBox.filterBox div { margin-top:10px; }


/* QUICK OPTION ICONS (e.g., LMS link on TLN home page) */
.quickLinks a { color:#000000; text-decoration:none; }
.quickLinks a:hover .text, .quickLinks a:focus .text { color:#006633; text-decoration:underline; }
.quickLinks .split { display:inline-flex; gap:10px 30px; margin:15px 0 1rem 1rem; overflow:auto; position:relative; }
.quickLinks .split > div { max-width:75px; }
.quickLinks .split svg { height:auto; width:100%; }
.quickLinks .split .screenshot { display:inline-block; max-width:75px; position:absolute; }
.quickLinks .split .screenshot img { box-sizing:border-box; height:auto; padding:3px 4px; width:100%; }
.quickLinks .split .text { display:inline-block; font-size:110%; line-height:1.3rem; max-width:200px; text-transform:uppercase; width:200px; }
@media (max-width: 410px) {
    .quickLinks .split { display:inline-block; margin-left:0; }
    .quickLinks .split > div { margin:0 auto; max-width:100px; }
    .quickLinks .split .screenshot { max-width:100px; }
    .quickLinks .split .text { margin-top:10px; text-align:center; }
}


/* CONTACT LISTING */
ul.contactList { list-style:none; margin:0; padding:0; }
ul.contactList li { margin:0; padding:1rem 0 0; }
ul.contactList li:first-child { padding-top:0; }
ul.contactList.multiCol { display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); overflow:auto; }  /* custom styling -- contacts are shown side by side, depending on available space  */
ul.contactList.multiCol li { box-sizing:border-box; outline:1px solid #e5e5e5; padding:1rem; }
ul.contactList.multiCol li:only-child { outline:none; }
ul.contactList.multiCol.twoCol { grid-template-columns:1fr 1fr; }                                                              /* custom styling -- two-column contact list (e.g., TLN Programming Committee page) */
ul.contactList.pics li { display:grid; grid-template-columns:120px 1fr; overflow:auto; }                                       /* custom styling -- contact list with pictures (e.g., UGPTI Advisory Council page) */
ul.contactList.pics li > div > img { border:1px solid #9A9A9A; height:130px; width:100px; }
ul.contactList.pics li > div > div.imgPlaceholder { height:130px; width:100px; }
ul.contactList.pics.multiCol { grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); }
ul.contactList.pics.compact li { grid-template-columns:70px 1fr; }                                                             /* custom styling -- contact list with compact pictures (e.g., UGPTI Staff page)    */
ul.contactList.pics.compact li > div > img,
ul.contactList.pics.compact li > div > div.imgPlaceholder { height:68px; width:50px; }
@media (max-width:800px) {
    ul.contactList.multiCol { display:block; }
    ul.contactList.multiCol li { border-bottom:1px solid #e5e5e5; outline:none; padding:1rem 0; }
}


/* CONTACT CARD (typically used to display bio photo and contact info) */
.contactCard { display:grid; column-gap:20px; grid-template-areas:"img content"; grid-template-columns:120px 1fr; line-height:1.4rem; overflow:auto; }
.contactCard img { border:1px solid #9A9A9A; grid-area:img; height:auto; width:100%; }
.contactCard .imgPlaceholder { grid-area:img; height:162px; width:100%; }
.contactCard .content { grid-area:content; }
.contactCard .content span { font-weight:bold; }


/* STANDARD REGION MAP (e.g., TLN Contact Us page) */
.commonRegionMap svg { max-width:650px; }
.commonRegionMap #Active_FMap a:hover path { fill:#122a5c; }


/* UPCOMING EVENTS SECTION (e.g., TLN Upcoming Presentations page) */
.upcomingEvents > ul { list-style:none; margin:0; padding:0; }
.upcomingEvents > ul > li { line-height:normal; margin-bottom:1.5rem; }
.upcomingEvents > ul > li > ul { list-style:disc; margin-top:8px; }
.upcomingEvents.compact ul ul { margin:5px 0 0 25px; padding:0; }       /* custom styling -- for module that only shows a portion of the events (e.g., TLN home page) */
.upcomingEvents.compact ul ul li { font-style:italic; }


/* SEARCH RESULTS PAGE (e.g., see option to view all research reports) */
.searchCriteria { margin:1.5rem 0; }
.searchResults { border:1px solid #000000; border-width:1px 0; margin-top:1rem; }
.searchResults > h2:first-child { background-color:#19632D; background-image:linear-gradient(45deg, #19632D, #4A7B57); box-shadow:inset 0 0 50px #064718; color:#FFFFFF; font-size:1rem; margin:0; padding:8px; }
.searchResults > div { border-top:1px solid #7E7E7E; line-height:1.4rem; padding:15px; }
.searchResults > div:nth-child(odd) { background-color:#F3F3F3; }
.searchResults .searchTools { background-color:#19632D; background-image:linear-gradient(45deg, #19632D, #4A7B57); border:0; box-shadow:inset 0 0 50px #064718; color:#FFFFFF; padding:8px; }
.searchResults .searchTools a { color:#FFFFFF; }
.searchResults .searchTools span { margin:0 40px 0 4px; }
.searchResults .searchTools .pgNumbers { font-size:110%; margin:0; padding:5px; text-align:right; }
.searchResults .searchTools .pgNumbers img { height:24px; vertical-align:middle; width:24px; }
.searchResults .searchTools form { background-color:#0A481B; border-radius:6px; margin:2px 0 0; padding:4px; }
.searchResults .article .title { border:0; font-weight:bold; margin-bottom:5px; padding:0; }
.searchResults .article .title .addInfo,
.searchResults .article .title .fileInfo { font-weight:normal; }

.searchResults .articleTitle { border:0; font-weight:bold; margin-bottom:5px; padding:0; }  /* LEGACY -- use "title" instead */
.searchResults .articleTitle .addInfo, .searchResults .articleTitle .fileInfo { font-weight:normal; }

.searchResults .authorNames,
.searchResults .keywords { font-size:80%; }
.searchResults p { margin:0.5rem 0 0; padding:0; }
.searchResults p span { font-weight:bold; }


/* STANDARD DATA TABLES */
.dataTable { margin:2rem 0; }
.dataTable table { border:1px solid #CCCCCC; border-collapse:collapse; }
.dataTable table caption { caption-side:bottom; margin:8px 0; padding-left:4px; text-align:left; }
.dataTable table caption span { font-weight:bold; }
.dataTable table caption p.source { font-size:90%; font-style:italic; margin:2px 0; }
.dataTable tr { vertical-align:top; }
.dataTable th,
.dataTable td { border:1px solid #CCCCCC; padding:6px; }
.dataTable th,
.dataTable td.th,
.dataTable tr.th td { background-color:#F5F5F5; font-weight:bold; }
.dataTable.sticky > table { position:relative; }             /* custom styling -- makes column headers sticky */
.dataTable.sticky > table tr th { position:sticky; top:0; }



/* REPLICATE TABLE OF IMAGES (e.g., award recipients page) */
.imageLayout_3CGrid > ul { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min-content, 130px)); list-style:none; margin:0; max-width:500px; overflow:auto; padding:0; }
.imageLayout_3CGrid > ul > li { font-size:0.8rem; margin:0; max-width:130px; text-align:center; }
.imageLayout_3CGrid .imgPlaceholder { height:175px; margin-bottom:4px; width:130px; box-sizing:border-box; }
.imageLayout_3CGrid .imgPlaceholder img { height:100%; width:100%; }
.imageLayout_3CGrid .name { line-height:1rem; margin-bottom:4px; }
.imageLayout_3CGrid .imageGridLink { font-weight:bold; margin:1rem 0; max-width:405px; text-align:center; }

/* IMAGE LAYOUT -- STANDARD IMAGE ROW ENTRIES (e.g., CTIPS project details page) */
ul.imageLayout_rows { list-style-type:none; margin:0; padding:0; }
ul.imageLayout_rows > li { display:grid; gap:20px; grid-template-columns:120px 1fr; margin:0; }
ul.imageLayout_rows > li > div { padding:5px 0 1.5rem; }
ul.imageLayout_rows > li > div:nth-child(2) { border-left:1px solid #CCCCCC; padding-left:20px; }
ul.imageLayout_rows > li img,
ul.imageLayout_rows > li .imgPlaceholder { border:1px solid #9a9a9a; box-sizing:border-box; height:96px; width:120px; }
ul.imageLayout_rows > li .imgPlaceholder img { border:0; height:100%; width:100%; }
ul.imageLayout_rows > li > div > span { font-style:italic; }
ul.imageLayout_rows > li:last-child > div { padding-bottom:5px; }
ul.imageLayout_rows > li > div > h2 { margin-top:0; }
ul.imageLayout_rows > li > div > p { margin:0 0 8px; }

/* IMAGE LAYOUT -- STANDARD FOUR COLUMN LAYOUT (e.g., about CTIPS university page) */
.imageLayout_columns { clear:both; display:grid; gap:20px; grid-template-columns:repeat(4, 1fr); grid-template-rows:auto 1fr auto; margin:2rem 0; }
.imageLayout_columns .card { display:grid; gap:0; grid-row:span 3; grid-template-rows:subgrid; overflow:hidden; }
.imageLayout_columns .card .imgPlaceholder { border:1px solid #E3E3E3; border-bottom:0; overflow:hidden; }
.imageLayout_columns .card .imgPlaceholder img { margin:-25px 0; width:100%; }
.imageLayout_columns .card .content { background:linear-gradient(160deg, #F0F0F0, #FFFFFF 60%); border:1px solid #E3E3E3; border-width:0 1px; min-height:130px; padding:5px 20px; }
.imageLayout_columns .card .content > h2,
.imageLayout_columns .card .content > h3 { color:#000000; font-size:1rem; margin:5px 0; }
.imageLayout_columns .card .content > p { margin:5px 0; }
.imageLayout_columns .card .content > :first-child { margin-top:1rem; }
.imageLayout_columns .card .content > :last-child { margin-bottom:1rem; }
.imageLayout_columns .card .action { background-color:#083717; background:linear-gradient(165deg, #004712 40%, #083717); border:1px solid #083717; border-radius:0 0 4px 4px; border-top:0; text-align:center; }
.imageLayout_columns .card .action > a { color:#FFFFFF; display:block; padding:10px; }
@media (max-width:800px) {
    .imageLayout_columns { grid-template-columns:repeat(2, 1fr); }
}



/* ACTION BUTTON (e.g., button to view submission archives on the NDLTAP Innovation Champions page */
.actionButton { margin:1.5rem 0 2rem; }
.actionButton a,
.actionButton input { background-color:#004712; border:0; border-radius:25px; color:#FFFFFF; display:inline-block; font-size:1.1rem; padding:10px 20px; text-decoration:none; }
.actionButton a:hover,
.actionButton input:hover { background-color:#000000; filter:drop-shadow(2px 2px 2px #CCCCCC); }



/* HELP ICON (e.g., search field on the CVSC resources page) */
.helpIcon { color:#FFFFFF; background-color:#7C7C7C; border-radius:50%; display:inline-block; height:24px; line-height:26px; margin-left:15px; position:relative; text-align:center; width:24px; }
.helpIcon:before{ content:'?'; font-weight:bold; }
.helpIcon p { background-color:#1F1F1F; border-radius:3px; left:-999em; padding:20px; position:absolute; top:10px; text-align:left; width:350px; }
.helpIcon p:before { border:6px solid transparent; border-bottom-color:#1F1F1F; content:''; height:0; left:10px; position:absolute; top:-12px; width:0; }
.helpIcon:hover p { left:0; }



/* WEBDEV PAGE WARNING */
#webDevWarning { background-color:#FFFFFF; border-radius:10px; font-size:120%; font-style:italic; margin:20px auto; max-width:1300px; padding:2rem 0; }
#webDevWarning p { margin-left:130px; padding:0 2rem; }
#webDevWarning img { float:left; height:100px; margin-left:-130px; vertical-align:middle; width:100px; }
#webDevWarning strong { color:#FF0000; }
@media (max-width:550px) {
    #webDevWarning p { margin:0; }
    #webDevWarning img { margin:0; padding-right:20px; }
}