/*===========================================================================================
//GLOBAL STYLES: PROBABLY NOT A GOOD IDEA TO CHANGE.
===========================================================================================*/
html 
{
	margin:0;
	padding:0;
	border: 0;
	
}

body 
{
	margin:0;
	padding: 0;
	border:0;
	font-size: 80%;
	color:#303030;
	background-color:lightgray;
	/*font-family:century gothic;*/
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 125%;

}

a
{
	text-decoration:none;
}

a:link
{
	color:blue;
}

a:visited
{
	color:blue;
}
a:hover 
{
	color:red;

}


a:active
{
	border:0;
	border-bottom:1px dashed black;
	text-decoration:none;
}

/*===========================================================================================
//IMAGE STYLES:
//img.bottomlogos are small logos at the bottom; for example co-sponsor logos on an event page
//img.rsportraits are researcher spotlight portraits: the big pictures on the individual spotlight pages.
//img#spotlight is the big front page researcher spotlight pic, including corkboard
//topleftimg, topmiddleimg, topmiddleimg2, topmiddleimg3...Only 2 is being used, it's the banner image. Should be OK to delete others.
//toprightimg is deprecated.
//aboutportraits: portraits of people on their bio page (ie, in the /about subdirectory)
//leventportraits, reventportraits: small pictures for laying out lists of events (eg past events page)
//llargeeventportraits, rlargeeventportraits: larger pictures for actual events page. l and r refer to which side they'll float.
===========================================================================================*/
	
img.bottomlogos
{
	height: 4em;
	text-align:center;
	margin:1.5em;
	border:0;

}
	
img.rsportraits
{	
	width: 23em;
	margin-left:0.5em;
	/*border:0.25em ridge navy;*/
	border:0;
	padding:0;
}
img#spotlight
{
	position:relative;
	top:1em;
	left:1em;
	width:44em;
}

	
img#topleftimg
{
	position:relative;
	top:2.2em;
	left:1em;
	width:17em;
}

img#topmiddleimg2
{
	position:relative;
	top:-0.8em;
	left:1em;
	width:700px;
}


img.aboutportraits
{
	margin:1em;
	border:2px ridge navy;
	float:left;
}
img.leventportraits
{
	margin:0.5em 1em 0.5em 0;
	padding:0;
	width: 10em;
	border:2px ridge navy;
	float:left;
}
img.reventportraits
{
	margin:0.5em 1em 0.5em 0.2em;
	padding:0;
	width: 10em;
	border:2px ridge navy;
	float:right;
}
img.eventheaders
{
	float:right; 
	border:1px solid black; 
	height:14em; 
	margin:0.5em;
}

img.llargeeventportraits
{
	margin:1em 1em 0em 0.2em;
	padding:0;
	width: 14em;
	border:1px solid black;
	float:left;
}
img.rlargeeventportraits
{
	margin:1em 0em 0em 0.2em;
	padding:0;
	width: 14em;
	border:1px solid black;
	float:right;
}
img.lmediumportraits
{
	margin:1em 1em 0em 0.2em;
	padding:0;
	width: 6em;
	border:1px solid black;
	float:left;
	vertical-align:top;
}
img.rmediumportraits
{
	margin:1em 0em 0em 0.2em;
	padding:0;
	width: 6em;
	border:1px solid black;
	float:right;
	vertical-align:top;
}
img.cyhrnetbullet
{
	width:2em;
	float:left;
	border:0;
	margin-right:1em;

}

/*===========================================================================================
//TEXT STYLES:
//basic: basic writing.
//basic2: inline subheading sorta stuff. Bold.
//subtitles: over and underlined, larger.
//textlabels: regular size, italic text
//subtitles2: larger text, bold, no over/underline
//sectiontitles:blue background, white text
//contenttitles:larger text.
//news1-news4: for laying out newsfeed. What a pain.
//then a few more, left behind from when i started out. Scared to remove them.
===========================================================================================*/

	p.basic, span.basic
	{
		font-size: 1em;
		/*margin-left:0.5em;*/
		margin-top:0em;
	}
	p.basic2, span.basic2
	{
		font-size: 1em;
		margin-left:-0.1em;
		margin-top:0em;
		font-weight:bold;
	}
	p.subtitles2, span.subtitles2
	{
		font-size: 1.1em;
		font-weight:bolder;
		line-height: 115%;
		/*margin-left:0.2em;*/
		margin-top:0.5em;
	}
	p.subtitles, span.subtitles
	{
		font-size: 1.3em;
		font-weight:bolder;
		line-height: 115%;
		/*margin-left:0.2em;*/
		margin-top:0.5em;
		border-top:1px solid navy;
		border-bottom:1px solid navy;
	}
	p.textlabels, span.textlabels
	{
		font-size: 1em;
		margin-left:0.1em;
		margin-top:0em;
		font-style:italic;
	
	}


	
	p.contenttitles, span.contenttitles{
		font-size: 1.3em;
		color: darkslategray;
		font-weight:bold;
		margin-top:0.5em;
	}
	p.sectiontitles, span.sectiontitles {
		font-size: 1.3em;
		color: darkslategray;
		font-weight:bold;
		/*margin-left:0.3em;*/
		text-align:center;
		color:white;
		background:navy;
		padding:0.1em 0 0.1em 0.5em;
		margin-top:0.5em;
	}
	p.fineprint {
		font-size:1em;
		color:lightslategrey;	
	}
	p.news1, span.news1
	{
		font-size: 0.85em;
		line-height: 135%;
	}
	p.news2, span.news2
	{
		font-size: 1em;
		font-weight: bold;
		line-height: 135%;		
	}
	
	p.news3, span.news3
	{
		font-size: 0.9em;
		font-weight:bolder;
		text-decoration:underline;
		line-height:200%;
		
	}
	p.news4, span.news4
	{		
		font-size: 1em;
		margin-top:0em;
		font-style:italic;
	}
	span.searchtitle
	{
		border:1px solid red;
	}	
	span.breadcrumb
	{
		text-align:left;
	
	}
	span.search
	{

	}
	form#searchbox
	{
		margin-top:-1.3em;		
		text-align:right;
	}
/*===========================================================================================
//LIST STYLES:
//Basic ul: No bulleting.
//inlinebulleted: mostly aligned with text, disc-bulleted
//inthemedia: originally for the "in the media" section of co-leaders page, this bulleted list has more space between items and more indent.
//oscommittee, coleaders: just want to align the text with the middle of the portrait, this is how. img selectors follow.

===========================================================================================*/
	
	
	
	ul {
		padding-left:0.7em;
		margin:0.3em;	
		list-style-type:none;
	}
	ul.inlinebulleted {
		
		padding-left:0.7em;
		list-style-type:disc;
	}
	ul.inlinebulleted  li
	{
		margin-bottom:0.4em;
	}

	ul#inthemedia, ul.inthemedia
	{
		margin:0.3em 0.3em 0.3em 1em;	
		list-style-type:disc;		
	}
	
	
	ul#inthemedia li, ul.inthemedia li
	{
		margin-bottom:0.4em;
	}
	
	ul#oscommittee, ul#coleaders
	{
		vertical-align:middle;
		
	}
	ul#oscommittee img, ul#coleaders img
	{
		height:5em;
		border:0.5px solid black;
		vertical-align:middle;
	
	}
	
	#priorityinitiatives  li 
	{
		font-weight:bolder;
		padding:0;
		margin:0;
	}
		
	#priorityinitiatives ul li
	{
		list-style-type:none;
		font-weight:normal;

	}
	#priorityinitiatives ul
	{
		padding-left:0.5em;
		margin:0;
		
	}
	#priorityinitiatives
	{
		padding-left:1.5em;
		margin:0.5em;
	}
	
/*===========================================================================================
//DIV STYLES: MIGHTY MEATY MATEY
//Site consists of a wholepage div which contains a pagecontentdiv, which contains the actual Stuff.
//topbar has 2 divs: topleft, topmiddle containing logo and image banner respectively.
//topright is depreceated.
//breadcrumbbar, menuwrapper, menu, all do what they sound like.
//middle contains actual content. More info below.
===========================================================================================*/

div#wholepage /*the entire page pane, containing centered pagecontent */
	{ 
		/*width: 75em;*/
		background-color:lightgrey;
		margin-left: auto;
		margin-right:auto;
		margin-bottom:1em;
		margin-top:-0.2em;
		*height:150em;
	}	

div#pagecontent 
	{
		position:relative;
		width: 75em;
		margin-left:auto;
		margin-right:auto;
		background-color:white;
		clear:both;
	}

div#topbar 
	{
		width:75em;
		/*clear:both;	*/	
		/*height:13em;*/
	}

	div#topleft 
		{
			width:18.75em;
			float:left;	
		}

div#topmiddle2
{
	width:56em;
	float:left;
}
/*
div#topright 
{
	width:16.75em;
	float:left;
}
*/
div#breadcrumbbar
	{
		width:72em;
		margin:0.2em 0.5em 0 1.5em;		
		height:2.2em;
		clear:both;
		/*position:relative;
		top:2em;*/		
	}
		
div#menuwrapper 
	{
		width:73em;
		margin:0 0 0 1em;
		clear:both;
		height:2.5em;		
		background-color:navy;
	}

div#menu 
	{
		width:72em;
		margin-left:auto;
		margin-right:auto;

		margin-top:0;
		padding-top:0.2em;
		margin-bottom:0;
		height:2.3em;
		vertical-align:top;
	}

div#middle
	{
		width: 75em;
		clear:both;
		margin-top:1em;
		background-color:white;
		
	}
	
	div#middleonly
	{
		padding:1em 2em 1em 2em;
		background-color:white;		
	}
	
	div#newslettercontainer
	{
	
		padding:1.5em 0 1.5em 0;
	
		background-color:lavender;
		text-align:left;
		
	}

	div#bigmiddlebox
	{
		padding:0.5em 1.5em 0.5em 1.5em;
		background-color:lavender;
	}
		div#bigmiddlebox  p.sectiontitles a:hover
		{
			color:red;			
		}
		div#bigmiddlebox  p.sectiontitles a
		{
			color:white;
		}
/*===========================================================================================
//For laying out content with the main information on the left and smaller boxes on the right
//mleft: the left container
////mleftbox, mleftbox2, mleftbox3, mleftbox4 are all used to contain content in the left hand side of the page. They only differ in background colour.
//mright: the right container with the smaller auxiliary boxes inside
////topbox, middlebox, bottombox: again differ in background color alone.
===========================================================================================*/
div#mleft 
	{
		width: 46em;
		
		float:left;
		margin-left:1.5em;
		display:inline;


	}


div.mleftbox 
	{
		width: 40.5em;
		float:left;
		background-color:lavender;
		margin:1em;
		padding:0.5em 1em 1em 1em;
		
	}
	div.mleftbox2
	{
		width: 40.5em;
		float:left;
		background-color:gainsboro;
		margin:1em;
		padding:0.5em 1em 1em 1em;
	}	
	
	div.mleftbox3
	{
		width: 40.5em;
		float:left;
		background-color:#CCCFFF;
		margin:1em;
		padding:0.5em 1em 1em 1em;
	}
	
		div.mleftbox4
	{
		width: 40.5em;
		float:left;
		background-color:#99CCFF;
		margin:1em;
		padding:0.5em 1em 1em 1em;
	}

	img.imgcenteredtext
	{
		vertical-align:middle;
		border:1px solid black;
		width:5em;
		margin-right:0.2em;
		
		
	
	} 
	


div#mright 
	{
		width: 26em;		
		float:right;
		display:inline;

	}
	div#topbox 
	{

		width: 22.8em;
		margin-left:0.5em;
		margin-top:0.5em;
		padding:0.5em 1em 0.5em 1em;		
		background-color:lavender;


	}
div#topbox2
	{

		width: 23.75em;
		margin-left:0.5em;	
		padding:0.5em 0.5em 0.5em 0.5em;		
		background-color:lavender;
		

	}

div#middlebox , div.middlebox
	{		
		width:22.8em;
		margin-left:0.5em;
		margin-top:0.5em;
		padding:0.5em 1em 0.5em 1em;
		background-color:lightsteelblue;
		

	}

div#bottombox , div.bottombox
	{
		width:22.8em;
		margin-left:0.5em;
		margin-top:0.5em;
		padding:0.5em 1em 0.5em 1em;
		background-color:lavender;


	}
div.biobox
	{
		width:68em;
		background-color:lavender;
		margin:0.3em;
		float:left;
		vertical-align:middle;
		padding:1em;
	}
img.bioimg
	{
		height:5em;
		border:1px solid navy;
		float:left;
		margin:1em;
	}
	
/*===========================================================================================
//For laying out content with the main information on the RIGHT and smaller boxes on the LEFT (for example, bio pages)
//mleft2: the smaller left container. Adding boxes? use topbox, middlebox, bottombox.
//mright2: the right container with the main content.
///mright2box: boxes in the main (right) pane with additional content.
////topbox, middlebox, bottombox: again differ in background color alone.
===========================================================================================*/	
div#mleft2 
	{
		width: 26em;
		float:left;
		margin-left:1.5em;
		display:inline;

	}

div#mright2 
	{
		width: 45.5em;
		
		float:right;
		background-color:white;
		padding-right:0.5em;
		display:inline;
	}	
div#mright2box 
	{
		width: 40.5em;
		float:right;
		background-color:lavender;
		margin:1em;
		padding:0.5em 1em 1em 1em;
	}	


div#bottombar 
{
	width:75em;
	clear:both;
	text-align:center;
	padding-bottom:1em;

}