/*** HOW TO USE ***/

/*

To create a panel in a KB document, please follow these steps (the first group of steps is required, the second set includes optional settings):

REQUIRED:

1) Insert a heading tag and give it the class "panel-head". Set the text for the heading to whatever you would like displayed as the visible name of the panel.

2) Directly below the heading, insert a div tag and give it the class "panel-content". Place the desired content inside of this div tag, using any other HTML tags that are needed.

Example:

<h3 class="panel-head">Section One</h3>
<div class="panel-content">
  <p>Some content to be displayed inside panel one. This content will be shown/hidden as the panel is toggled.</p>
</div>

OPTIONAL:

1) If you would like a panel to be expanded by default when the page is loaded, add the class "expanded" to the heading tag, e.g. <h3 class="panel-head expanded">Section One</h3>

2) If you would like to anchor to a panel from a link (either on the current page or from a different page), add an ID to the heading tag with the desired anchor text, e.g. <h3 class="panel-head" id="section-one">Section One</h3>
You may then reference the heading tag in an anchor link, e.g. <a href="#section-one">Section One</a>
If you link directly to a panel from a different page, the linked panel will be expanded and all other panels will be collapsed when the page loads. If you link to a panel from the current page, the linked panel will be expanded (other panels will not be collapsed if already opened).

Created by Leah Scheide
*/

.panel-head {
  	border: 1px #bbb solid;
	border-radius: 5px;
	background-color: #f9f9f9;
  	padding: 10px;
  	color: #000;
  	margin: 10px auto 0px;
}

.panel-head:hover, .panel-head:focus {
	outline:none;
	background-color: #e7e7e7;
}

.panel-head.expanded {
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;}

.panel-head:hover {
	cursor:pointer;
}

.panel-head::before {
    content: "+";
    padding-right: 10px;
    font-size: 24px;
}

.expanded::before {
    content: "-";
    padding-right: 15px;
    font-size: 24px;
}

.panel-content {
  	border-right: 1px #bbb solid;
  	border-left: 1px #bbb solid;
  	border-bottom: 1px #bbb solid;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding:15px;
}

#expandAll, #collapseAll {
	margin: 15px 5px;
}

#expandAll + .panel-head, #collapseAll + .panel-head {
    margin-top: 0;
}