/****************************************************************************
 * Definition of "section" related style sheets. 							
 * A section is a composite of visible GUI elements. Section can be packed/unpacked
 * by clicking on it's heading. All the contained elements are hidden/shown
 * by section packing/unpacking.
 ****************************************************************************/

.section {
	font-style: bold;
	font-size: 1em;	
	margin-bottom: 20px; 
}

.section-heading {
	color:black;
	font-weight: bold;
}

.section-heading a {
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 10px;
	text-decoration: none;
}

.unpacked .section-heading a {
	background-image: url(../images/arrow_black_down.gif);
	color: black;
}

.packed .section-heading a {
	background-image: url(../images/arrow_gray_right.gif);
	color: #5D5D5F; /* Gray */
}

.packed .section-element {
	display: none;
}

.section-element {
	margin-bottom: 10px;
}

.section-element-title {	
	padding-left: 10px;
	font-weight: bold;
	color: black;
}

a.section-element-title {
	background-image: url(../images/arrow_blue_right.gif);
	background-repeat: no-repeat;
	background-position: left ;
	text-decoration: none;
	color: #1A9CD8; /* Blue */
}

a.section-element-title:hover {
	background-image: url(../images/arrow_black_right.gif);
	color: black;	
}

a.section-element-title:visited {
	background-image: url(../images/arrow_black_right.gif);
	color: black;	
}


.section-element-content {	
	padding-left: 10px;
}