/*************************************************************************************************************
 * Layout for main sections of the page 
 */
body, #container, #masthead, #header, #banner, #sidebar, #content, #footer { margin: 0; padding: 0; border: 0; }

/*************************************************************************************************************
 * Utility Functions 
 */
.check_back { text-align: right; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.center { margin-left: auto; margin-right: auto; display: block; text-align: center; }

/*************************************************************************************************************
 * Page Colors (font and background)
 */
a { color: #456573; }
#extlinks a, #intlinks a, #footer p, #footer a:hover { color: #efe6cd; }
body, #footer { background-color: #222222; }
#container { background-color:#456573; }
#content { background-color: #efe6cd; }

/*************************************************************************************************************
 * General Styles
 */

h1 {font-size: 18px}
h2 {font-size: 16px}
h3 {font-size: 14px}
h4 {font-size: 12px}

img { border-width: 0px; }
p { text-align: justify; }

/* Unordered List styles */
ul { list-style-type: disc; margin-left:25px; }
.no-style { list-style-type: none; margin-left: 0px; }
.history { list-style-type: none; list-style-position: outside; margin-left: inherit; margin-bottom: 10px}
.history>li { margin-bottom: 10px}
.no-style>li { margin-bottom: 10px; }

div>a[href~="#TOP"] { font-size: xx-small; margin-top: 0px; text-align:right; float:right; }

/*************************************************************************************************************
 * Styles for page Body and Content 
 */
body { font-family: Arial; font-size: 14px; }
#container { width: 960px; margin: 0 auto; }

/*************************************************************************************************************
 * Styles for Header 
 */
#header { float: left; width: 960px; padding: 12px 0px; }
#masthead { float: left; width: 240px; }
#banner { float: left; width: 720px; }

/*************************************************************************************************************
 * Styles for Navigation 
 */
#sidebar { float: left; width: 220px; }
#sidebar hr { margin-left: 10px; width: 210px; display: block; }

#extlinks, 
#intlinks { padding-right: 0px; font-weight: bold; }
#extlinks { font-size: 12px; margin-top: 5px; }
#intlinks { font-size: 16px; margin: 42px 0px; }

#extlinks p, #intlinks p, #sidebar hr { text-align: right; }
#extlinks p a, #intlinks p a { text-decoration: none; margin-top: 16px;}

/*************************************************************************************************************
 * Styles for Footer 
 */
#footer { clear: both; padding-top: 1px; font-size: small; }
#footer p { text-align: center; font-size: small; }
#footer a:hover { color: #efe6cd; }
#footer a{ color: #9DB1C3; }

/*************************************************************************************************************
 *************************************************************************************************************
 * CONTENT SECTION OF THE PAGE AND ALL SUB CONTENT VALUES
 * IMPORTANT SECTIONS HERE IN
 * 		:CONTENT HEADER-FOOTER/NAV
 *		:CONTENT BODY
 *		:CONTENT RECENT UPDATES
 *		:CONTENT ARCHIVE/TABLE-LIST
 *		:CONTENT DOCUMENTS
 *		:CONTENT MULTI-CITED-IMAGES
 */
#content { float: right; width: 690px; padding: 15px; }
#content img { display: block; }

/*************************************************************************************************************
 * Content Header and Nav
 */
#intro, #outro { text-align: left; }
#intro p, #outro p { font-size: small; }
#intro table { width: 100%; border-spacing: 0px; border-collapse: collapse; }
#intro tr { vertical-align: top; }
#intro tr p { font-size: 14px; text-align: justify; }
#intro tr img { margin-bottom: 0px; }
#intro tr img+p { margin-top: 0px; font-size: xx-small; }
#intro td { padding: 0px; margin: 0px; }
#intro td:first-child { padding-right: 10px; }
#navbar { border-collapse:collapse; width: 100%; }
#navbar td {white-space:nowrap; vertical-align :top; text-align: center; }
#navbar td + td {padding-left:8px; padding-right:10px; border-left: 1px solid gray; }


/*************************************************************************************************************
 * Main page update list
 */
.update h4 {margin-top: .9em; margin-bottom: .9em;}
.update table { width: 100%; }
.update td { vertical-align: top; text-align: left; width: 120px; font-size: 11px;}
#update td { vertical-align: top; text-align: left; width: 120px; font-size: 11px;}
.update .title { vertical-align: top;}
.update td img { float: left; width:110px; }
.project-label { color: black; font-weight: bold; display: inline-block; padding-bottom: 2px; font-size: 12px; }
.update-title {font-weight: bold; font-size: 11px;}


/*************************************************************************************************************
 * Body for updates and most recent update on each projects main page as well as history pages
 * really any section that is mostly word content w/ no tables.
 */
#recent p { text-align: left; }
#recent img{ margin-bottom: 0px; }
#recent img+p { margin-top: 0px; font-size: small; }
#recent table { width: 100%; }
#recent th { text-align: center; font-weight: bold; }
#recent tr { vertical-align: top; }

/*************************************************************************************************************
 * Contacts Section of project main pages
 */
#contact h3 {margin-top: .9em; margin-bottom: 1em;}
#contact div column {float: left; width: 45%; padding-left: 10px; padding-right: 10px; padding-bottom: 25px; column-gap: 20px; height: 200px;}
#contact div row:after {content: ""; display: table; clear: both; }
#contact table { width: 100%; }
#contact td { width:45%; padding: 2%; display: inline-block; word-break: break-word; }
#contact tr { vertical-align: top; }
#contact td p { font-size: 10pt; font-family: Arial, Helvetica, sans-serif; }
#contact td p:first-child { text-decoration: underline; }




/*************************************************************************************************************
 * Archive Page (Also used on tabled lists with an image on the left and text on the right
 */
.archive-year { text-align:center; color:#456573; font-size:20px; font-weight: bold; }
#archive table { width: 100%; }
#archive td { vertical-align: top; padding: 10px; }
#archive td:first-child { width: 100px; }
#archive td img { float: right; }

/*************************************************************************************************************
 * Documents pages
 */
#documents p a[target=_blank] { text-align: left; }

/*************************************************************************************************************
 * Citation of 2 images on a single line using spans as containing parents for each image
 */
.twociteimg+div { margin-bottom: 0px; width: 100%; }
.twociteimg div span { margin-bottom: 0px; margin-right: 0px; margin-left: 0px; width: 49%; float: left; }
.twociteimg div span:first-child { margin-right: 1%; }
.twociteimg div+div { margin-top: 0px; width: 100%; }
.twociteimg div p { font-size: xx-small; margin-top: 0px; margin-right: 0px; margin-left: 0px; width: 49%; float: left; }
.twociteimg div p:first-child { margin-right: 1%; }

/*************************************************************************************************************
 * Impact page Comments
 */
 .bluejustify {	color: #456573;	text-align:justify; }
 .author { font-size:small; font-style:italic; text-align:right; }
/*************************************************************************************************************
 * Projects main pages
 */
.topLinks a { line-height:20px; }
#content0 #recent h4 { 
}
h5 {
}
h6 {
}
h7 {
    font-weight: bold;
}
h7 {
    vertical-align: baseline;
}

/*************************************************************************************************************
 * Equal columns that float next to each other
 */
column {
	float: left;
	width: 50%;
	padding: 10px;
	height: 300px;
	gap: 30px;
	
}
.contactscolumn {
	float: left;
	width: 50%;
	
	padding-bottom: 25px;
	
	height: 225px;
	overflow-wrap: break-word
}
/*************************************************************************************************************
 *Clear floats after the columns
 */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/*************************************************************************************************************
 *Unequal columns that float next to each other (used on WSF update for 6/23/2021)
 */
column {
	float: left;
	padding: 10px;
	height: 140px;
	gap: 20px;
}

.left {
	width: 10%;
	
}

.right {
	width: 75%;
	padding-top: 30px;
}


/*************************************************************************************************************
 *Clear floats after the columns
 */
.row:after {
	content: "";
	display: table;
	clear: both;
}
/*************************************************************************************************************
	*Indented list no bullets
	*/
.indentlist {
	margin-left: 20px;
}
/*************************************************************************************************************