/***************************************************************
*   Custom CSS Template for the jQuery Collapsible Sections
*
*   Each site that uses the collapsible sections should copy this
*       file and add it to the 'styles' folder inside 'SiteAssets'.
*       
*   Any styles that need to be overridden in the defaultStyles.css
*       for the collapsible sections should be done in this file.
*
*   On the page that you want to use the sections, add
*       a Content Editor Web Part.  Click inside of the Web Part,
*       then click "Edit HTML" and paste the following:  
*
*       <link href="/SITE_TITLE/SiteAssets/styles/collapseStyles.css" rel="Stylesheet" type="text/css"/>
*       <script language="javascript" type="text/javascript" src="/SiteAssets/libraries/collapsibleSections/collapseJQuery.js"><script>
*
*   NOTE: (*You have to remove and replace 'SITE_TITLE' in the all href addresses 
*           to match whichever site you are adding this to*)
*
*   Kaytee Quast
*   6/6/2011 - Custom CSS Template
*************************************************************/

/*The area that triggers the jQuery function when clicked*/
h2.sectionTrigger 
{
	/*background: url("/SITE_TITLE/SiteAssets/images/sectionTriggerBack.png") no-repeat;*/
	margin:0 0 5px 0;
	height:21px;
	width:100%;
	height:25px;
	background:none;
}


/*Area that holds the content and gets toggled*/
.toggleContainer 
{
	/*background-color: #EFEFEF;
	border-top: 1px solid #844892;*/
}

/******************
* Sub-sections
******************/

/*The area that triggers the jQuery function when clicked*/
div.subsectionTrigger 
{
    /*background: url("/SITE_TITLE/SiteAssets/images/subsectionBack.png") no-repeat;*/
}

/******************
* Collapsers
******************/
div.bottomCurve
{
    /*background: #FFFFFF url("/SITE_TITLE/SiteAssets/images/toggleBlockBtm.png") no-repeat;*/
}

h2.sectionTrigger a:hover {
	text-decoration:none !important;
}

h2.sectionTrigger a {
	padding-left:5px;
	color:#fff;
	text-decoration:none !important;
	display:block;
	font-weight: normal;
	font-size: 14px;
}
.toggleContainer {
	margin: 0px 0 5px 0px;
	overflow: hidden;
	width: 100%;
	clear: both;
	border:1px solid #ccc;
	background:none;
}

.toggleContainer .block {
	padding:15px 20px 15px 10px;
}