/*
Name: 		Collapse.css
Dependencies:	None, but is needed by collapse.js

Example:
--------

<div class="Expanded" onclick="ToggleExpand(this);">
  <div class="header">This is my header</div>

  <em>This is some text that can be hidden

    <br />
    <br />

    <div class="SubExpanded" onclick="ToggleSubExpand(this);">
    <div class="subheader">This is the sub-header</div>

     <em onclick="SuppressEventPropagation(event)">
		This is sub content in it's own box</em>
    </div>

  </em>

</div>

*/


.Collapsed div.header
{
background:  url(../FileUploads/Images/projArrowRight.gif) no-repeat center left #353D30; 
cursor: pointer;
color:#FFFFFF; 
text-decoration:none; 
padding:1px;
text-indent:25px;
}

.Collapsed div.header:hover
{
color:#7AB800;
}

.Collapsed em
{
display:none;
text-decoration:none; 
}


.Expanded
{
text-decoration:none; 
}

.Expanded em
{
display:block; 
color:#000000;
font-style:normal; 
border: 1px solid #353D30;
background:#FFFFFF;
text-background:#FFFFFF;
padding: 7px;
}

.Expanded div.header
{
background:  url(../FileUploads/Images/projArrow.gif) no-repeat center left #353D30; 
cursor: pointer;
padding:1px;
text-indent:25px;
color:#FFFFFF; 
text-decoration:none; 
}

.Expanded div.header:hover
{
color:#7AB800;
}


.Expanded div.SubExpanded
{
text-decoration:none; 
}

.Expanded div.SubExpanded div.subheader
{
	background: url(../FileUploads/Images/projArrowSML.gif) #989c96 no-repeat left center;
	cursor: pointer;
	padding: 1px;
	text-indent: 25px;
	color: White;
	text-decoration: none;
	font-family: Arial;
	font-size: 7.5pt;
}

.Expanded div.SubCollapsed em
{
display:none;
text-decoration:none; 
}

.Expanded div.SubCollapsed div.subheader
{
background:  url(../FileUploads/Images/projArrowRightSML.gif) no-repeat center left #989c96; 
cursor: pointer;
color:White;
text-decoration:none; 
padding:1px;
text-indent:25px;
font-family:Arial;
font-size:7.5pt;
}



/*
Name: 			Collapse.css
Dependencies:	None, but is needed by collapse.js

Example:
--------

<a class="Collapsed" href="#more" onclick="ToggleExpand(this)">
    <div class="header">Header between divs with class="header"</div>
    <em>Collapsed content between em tags</em>
</a>   




.Collapsed div.header
{
background:  url(../FileUploads/Images/projArrowRight.gif) no-repeat center left #005180; 

color:#FFFFFF; 
text-decoration:none; 
padding:1px;
text-indent:25px;
}

.Collapsed div.header:hover
{
color:#F9BA05;
}

.Collapsed em
{
display:none;
text-decoration:none; 
}


.Expanded
{
text-decoration:none; 
}

.Expanded em
{
display:block; 
color:#000000;
font-style:normal; 
border: 1px solid #005180;
background:#FFFFFF;
text-background:#FFFFFF;
padding: 7px;
}


.Expanded div.header
{
background:  url(../FileUploads/Images/projArrow.gif) no-repeat center left #005180; 
padding:1px;
text-indent:25px;
color:#FFFFFF; 
text-decoration:none; 
}

.Expanded div.header:hover
{
color:#F9BA05;
}
*/