/*Top Main Header*/

/* --- UPDATED GLOBAL STYLES --- */
body {
    background-color: #222222;
    margin: 0;
    padding: 0;
    text-align: center;
}


/* Container: Replaces your #body width constraints */
.page-container {
    max-width: 1024px;
    margin: 0 auto;
    background: #DCDCDC;
    border: 2px solid #222222;
}
/*Menu*/

/* --- MODERNIZED MENU --- */
ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #222222;
    display: flex; /* Modern flexbox layout */
    justify-content: center;
    flex-wrap: wrap; /* Allows menu to wrap on mobile */
    font: bold 12px Verdana, sans-serif;
}

li.menu {
    position: relative; /* CRITICAL for the sub-menu to align to this item */
    margin: 0;
}

li.menu a {
    display: block; /* Makes the whole area clickable */
    padding: 10px 1.5em;
    color: #222222;
    background: #C4C4C4;
    text-decoration: none;
    border: 1px solid #222222;
    white-space: nowrap; /* Prevents text from breaking */
}

ul.menu li a:hover {
    color: #C4C4C4;
    background: #222222;
}

/* --- THE SUB-MENU FIX --- */
.submenu {
    display: none;
    position: absolute; /* Positions it relative to the parent 'Climate' li */
    top: 100%; /* Sits exactly below the parent */
    left: 0;
    z-index: 1000;
    min-width: 250px; /* Adjust based on your text length */
    background-color: #f9f9f9;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.submenu li {
    border-bottom: 1px solid #ddd;
}

.submenu li a {
    background: #f9f9f9 !important; /* Forces submenu color */
    color: #222222 !important;
    padding: 10px 15px;
    border: none;
    font-size: 11px;
}

.submenu li a:hover {
    background: #eeeeee !important;
    color: #2A5DB0 !important;
}

/* Show on hover */
li.menu:hover .submenu {
    display: block !important;
}

/* --- MOBILE OPTIMIZATION --- */
@media screen and (max-width: 768px) {
    .page-container, table.page {
        width: 100% !important;
    }
    
    ul.menu {
        flex-direction: column; /* Stacks menu vertically on phones */
    }
    
    .submenu {
        position: static; /* Allows menu to expand downward on mobile instead of floating */
        width: 100%;
    }
}






ul.menu li a:link { color: #222222; }

ul.menu li a:visited { color: #222222; }

ul.menu li a:hover{color: #C4C4C4;

		background: #222222;

		}

li.menu a#current{color: #222222;

		background: #DCDCDC;

		}

/* Hide sub-menu by default */
.submenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  padding: 10px;
  list-style: none;
}

/* Show sub-menu on hover */
.dropdown:hover .submenu {
  display: block;
}

/* Optional: Style the sub-menu links */
.submenu li a {
  display: block;
  padding: 5px 0;
  text-decoration: none;
}

/* Whole page */

table.page 	{background: #DCDCDC; width: 1024px; vertical-align: top; margin-left: 0; margin-right: 0; border: 2px #222222}


/*content*/
div.content {width:100%; margin: 0px; text-align: center; color: #111111; font:  14px Verdana, sans-serif}
tr.content	{width:100%}

td.content 	{font: 14px Verdana, sans-serif; width: 100%; vertical-align: center;

		 padding-left: 25px; padding-right: 25px;}

h3.content 	{width:100%; margin-left: 0px; text-align: center; color: #111111; font:  14px Verdana, sans-serif; font-weight: bold}

/*h4.content 	{width:100%; margin-left: 0px; text-align: center; color: #111111; font:  14px Verdana, sans-serif; font-weight: bold}*/

p.content	{padding-left:0px; padding-right:0px; font:  13px Verdana, sans-serif; color: #111111}

a.content:link	{color: #2A5DB0; text-decoration: none}

a.content:hover	{color: #2A5DB0; text-decoration: none}

a.content:visited	{color: #2A5DB0; text-decoration: none}
	
	
/*research*/
div.floatright {float: right; vertical-align: center; font:  12px Verdana, sans-serif; color: #111111; text-align: center; padding: 10px}
div.floatcenter {float: center; vertical-align: center; font:  12px Verdana, sans-serif; color: #111111; text-align: center; padding: 10px}
div.center {font:  10px Verdana, sans-serif; color: #111111; text-align: center; padding: 10px}
p.rehead 	{padding-left:0px; padding-right:0px; font:  14px Verdana, sans-serif; font-weight: bold; color: #111111; text-align: center}

/*teaching*/
p.tehead 	{padding-left:0px; padding-right:0px; font:  14px Verdana, sans-serif; font-weight: bold; color: #111111; text-align: left}

/*picmenu*/
tr.picmenu  {width:100%}
td.picmenu	{vertical-align: top; text-align: left; padding-top: 10px; padding-left: 50px; width: 512px}
td.picmenu2	{vertical-align: top; text-align: left; padding-top: 10px; padding-left: 50px; width: 512px}

/*pix*/	

/*menus across pages under headers*/

ul.pix {margin-top: 0px;

	padding: 0px;

	margin-left: 0px;

	border: 1px #772;

	border-top: none;

	border-bottom: none;

	font: bold 12px Verdana, sans-serif;

	width: 100%;

	background: #DCDCDC;}



li.pix {list-style: none;

	margin: 0;
	
	background: #DCDCDC;

	/*display:inline;}*/
	}



li.pix a {padding: 0px 0.9em;

	margin-left: 2px;

	text-decoration: none;}

ul.pix li a:link { color: #2A5DB0; }

ul.pix li a:visited { color: #2A5DB0; }

ul.pix li a:hover{color: #2A5DB0;

	background: #bab088;

	}

li.pix a#current{color: #2A5DB0;

	background: #d2b48c;

	}

img.newpic	{border: 2px solid Cornsilk}
	
p.pichead	{width:100% ; margin-left:4px; text-decoration: underline; text-align: center; color: #111111;

	font: bold 12px Verdana, sans-serif; display: inline;
	}

p.picl2		{width:100% ; margin-left:4px; text-align: center; color: #111111;

	font: bold 12px Verdana, sans-serif; display: inline;
	}


table.pix	{vertical-align: top; width: 1023px; background-color: #DCDCDC;

		padding: 0px;

		}

tr.pix	{vertical-align: center;}



td.pix 	{margin-top: 0px; text-align: center;

	padding-left:0px; padding-right: 0px; padding-top: 3px; padding-bottom: 3px;

	width: 261px;

	}



/*links*/

ul.links 

	{margin-top: 0px;

	padding-left: 0px;

	margin-left: 0px;

	border: none;

	font: 12px Verdana, sans-serif;

	text-align: left;

	width: 100%;

	background-color: #DCDCDC;}

li.links {list-style: none; margin-left: 5px; padding-top: 4px; padding-bottom: 4px;}

li.links a {color: #2A5DB0; text-decoration: none; padding-top: 4px; padding-bottom: 4px;}

ul.links li a:link { color: #2A5DB0; }

ul.links li a:visited { color: #aaaaaa; }

ul.links li a:hover{color: #2A5DB0;

	background: #ffffff;}

	


/*lightbox*/

#lightbox{

	position: absolute;

	top: 40px;

	left: 0;

	width: 100%;

	z-index: 100;

	text-align: center;

	line-height: 0;

	}



#lightbox a img{ border: none; }



#outerImageContainer{

	position: relative;

	background-color: #111111;

	width: 250px;

	height: 250px;

	margin: 0 auto;

	}



#imageContainer{

	padding: 10px;

	}



#loading{

	position: absolute;

	top: 40%;

	left: 0%;

	height: 25%;

	width: 100%;

	text-align: center;

	line-height: 0;

	}

#hoverNav{

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

	z-index: 10;

	}

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{

	width: 49%;

	height: 100%;

	background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */

	display: block;

	}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.jpg) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.jpg) right 15% no-repeat; }





#imageDataContainer{

	font: 10px Verdana, Helvetica, sans-serif;
	
	color: #FFF5EE;
	
	background-color: #111111;

	margin: 0 auto;

	line-height: 1.4em;

	}



#imageData{

	padding:0 10px;

	}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	

#imageData #caption{ font-weight: bold;	}

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

		

#overlay{

	position: absolute;

	top: 0;

	left: 0;

	z-index: 90;

	width: 100%;

	height: 500px;

	background-color: #444444;

	filter:alpha(opacity=60);

	-moz-opacity: 0.6;

	opacity: 0.6;

	}

	



.clearfix:after {

	content: "."; 

	display: block; 

	height: 0; 

	clear: both; 

	visibility: hidden;

	}



* html>body .clearfix {

	display: inline-block; 

	width: 100%;

	}



* html .clearfix {

	/* Hides from IE-mac \*/

	height: 1%;

	/* End hide from IE-mac */

	}	
	
	@media screen and (max-width: 600px) {
  /* Stack menu items vertically on mobile */
  #menu li {
    display: block;
    width: 100%;
  }

  /* Make images and containers fit the screen width */
  img, .content-container {
    max-width: 100%;
    height: auto;
  }
}