function expand(section,arrow)
//this function does one of two things: opens or closes the section calling it
//If the section is closed, it opens it
//If the section is already open, it closes it
//Opening a section means making the section visible and changing the arrow read graphic to the close graphic
//Closing a section means the opposite: hiding the section section and changing the arrow graphic back to read
{
	// get references to current section section style and read/close arrow graphic
	var current_section = document.getElementById(section).style;
	var a = document.getElementById(arrow);

	//determine whether section is open or closed
	//check if display is equal to 'none'
	//if it is, the section is closed
	//if it is not, the section is already open
	
	if(current_section.display=='none')
	{
		//if the section is closed, open it by setting display equal to 'block'
		current_section.display='block';
		//and change the arrow graphic to the close version
		a.src = '../arrow_open.gif';
	}
	//if the section was open, close it
	else
	{
		//hide the section section by setting the display to 'none'
		current_section.display='none';
		//chagne the arrow graphic to read
		a.src = '../arrow_close.gif';
	}
	//The following line fixes an irrating feature in internet explorer
	//When you click a graphic in internet explorer, it becomes highlighted
	//by a dotted line because it has 'focus.' to get rid of this, set the focus
	//to another element on the page. I set the focus to the body of the document,
	//which is just the page in general. Otherwise, the read and close graphics
	//will have a dotted line around them after the user clicks them
	document.body.focus();
}