// start by getting all the questions and answers
// these will be put into arrays
	var questions = document.getElementsByTagName('dt');
	var answers = document.getElementsByTagName('dd');
//	var headers = document.getElementsByTagName('h2');
	var sections = document.getElementsByTagName('dl');

// function for the link that turns them all off
function toggleAllOff() {
	for (var i = 0; i < answers.length; i++) {  // turns off all the dd's
		answers[i].className = 'hide';
	}

//	don't need to hide sections... but we could
//	for (var i = 0; i < sections.length; i++) { // turns off all the dl's
//		sections[i].className = 'hide';
//	}
}

// function for the link that turns them all on
function toggleAllOn() {
	for (var i = 0; i < answers.length; i++) {  // turn on all the dd's
		answers[i].className = 'show';
	}
	
//	for (var i = 0; i < sections.length; i++) {  // turn on all the dl's
//		sections[i].className = 'show';
//	}	
}

function toggleNext(element) {
	var next = element.nextSibling;
	while(next.nodeType != 1) next=next.nextSibling; // if it gets to a non-element node, go to the next one
	next.className=((next.className=="hide") ? "show" : "hide");
}


//makes the definition lists click-able
function displayToggle(){
	
	toggleAllOff(); // calls the toggle all off function to turn all the answers off when the page is loaded	
	 
	 for (i=0; i<questions.length; i++) { // loops through the questions 
		 questions[i].onclick=function() { // shows the answers onclick
		 	toggleNext(this);
		}
	 }
	 
//	we're not hiding DLs... but we could
//	 for (i=0; i<headers.length; i++) { // loops through the headers a
//		 headers[i].onclick=function() { // shows the dl sections on click
//		 	toggleNext(this);
//		}
//	 }
}

/* 
flipStyle() -- a function to toggle CSS style attributes
This function accepts four parameters from the calling event:
targ_id, which is the id of the target element;
sty_attrJ, which is the style attribute's name in JavaScript syntax;
sty_attrC, which is the style attribute's name in CSS syntax;
set_val, which is the second toggle state value;

The element id, "z-Span" is reserved for this function's use.
*/
function flipStyle(targ_id,sty_attrJ,sty_attrC,set_val){ 
var targ=document.getElementById(targ_id);
var targ_stat="";
var targ_sty="";
var attr_chk=sty_attrC.toLowerCase()
var excp_flag=0;
if(attr_chk.indexOf("color")!=-1 || attr_chk.indexOf("font")!=-1){
excp_flag=1;
if(!document.getElementById("z-Span")){
var insSpan=document.createElement("span");
insSpan.setAttribute("id","z-Span");
document.body.appendChild(insSpan);
}
var zS=document.getElementById("z-Span").style
zS[sty_attrJ]=set_val;
}
if(targ.currentStyle){ //code for IE
if(excp_flag==1)set_val=zS[sty_attrJ];
targ_stat=targ.currentStyle[sty_attrJ];
}else{ //code for W3C-spec-compatible
if(excp_flag==1){
var tst_span=document.getElementById("z-Span");
var tst_sty=document.defaultView.getComputedStyle(tst_span,"");
set_val=tst_sty.getPropertyValue(sty_attrC);
excp_flag=0;
}
targ_sty=document.defaultView.getComputedStyle(targ,"");
targ_stat=targ_sty.getPropertyValue(sty_attrC);
}
targ_stat!=set_val ? targ.style[sty_attrJ]=set_val : targ.style[sty_attrJ]="";
}