//
// Accordion
// --------------------------------------------------


// Parent container
.accordion,
.pane-sliders {
  margin-bottom: @baseLineHeight;
}

.accordion-heading,
.pane-sliders h3.title {
	font-family: @JMmoduleTitleFontFamily;
  font-size: @JMbaseFontSize;
  margin: 0;
}
.accordion-heading .accordion-toggle,
.pane-sliders h3.title a {
  display: block;
  cursor: pointer;
  color: @JMaccordionFontColor;
  font-weight: @JMaccordionFontWeight;
  .box-sizing(border-box);
  margin: 0;
  line-height: @baseLineHeight;
  padding: 10px;
  position: relative;
  text-decoration: none;
  text-transform: @JMaccordionTextTransform;
	&:after {
		content: '+';
	  font-family: Arial, Helvetica, sans-serif;
	  position: absolute;
	  right: 20px;
	  left: auto;
  }
  .border-radius(@baseBorderRadius);
  &:focus {
    outline: 0;
  }
  &:focus,
  &:hover,
  &:active {
  	color: @JMaccordionFontColorHover;
  	background: @JMaccordionBackgroundHover;
  }
}

.pane-sliders h3.title.pane-toggler-down a:after {
	content: '-';
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 20px;
  left: auto;
}

.pane-sliders h3.title.pane-toggler-down {  	  	
  	background: @JMaccordionBackgroundHover;
  	a {
  		color: @JMaccordionFontColorHover;
  	}
}

.accordion .accordion-group,
.pane-sliders .panel {
	border: 1px solid @JMaccordionBorder;
}

.accordion .accordion-group + .accordion-group,
.pane-sliders .panel + .panel {
  margin-top: 5px;
}

// General toggle styles
.accordion-toggle,
.pane-sliders h3.title {
  cursor: pointer;
}

// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
  padding: 20px;
  border: none;
}

.pane-sliders h3.title.pane-toggler-down + .content {
  padding: 20px !important;
}