/*
 * @file
 * Style sheet for the views_accordion module
 * 
 * You can disable the loading of this file in your style options, just uncheck 'Use the module's default styling'
 *
 * .views-accordion-item wrappers get per-row classes like item-0, item-1 and so on
 *  style each row independently like this:
 * .views-accordion .item-1
*/

/* the whole accordion (only when js is enabled) */
.accordion-active {
 border: 1px solid #ddd;
 margin-bottom:1em;
}

/* all accordion sections */
.views-accordion-item {
}

/* the content hidden/shown within each section (only when js is enabled) */
.views-accordion-item .accordion-content {
  background-color: #fff;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.views-accordion-item .accordion-content p {
  margin: 0px; /* so that the animation doesn't jump */
}
/* the header the user clicks to open sections (only when js is enabled)*/
.accordion-header {
  cursor: pointer;
  color: #111;
  display: block; /* we dont know what html tag it will be, otherwise spans will display weirdly */
}
h3.accordion-header {
  margin-bottom:0;
  
}
.views-accordion-item .accordion-header,
h3.accordion-header {
  background-color:    #eee;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.accordion-item-even .accordion-header {
  background-color:    #ddd;
  border-color: #ccc;
}

/*
 * Don't use padding/margin top/bottom on .views-accordion-item, or the animation will jump for that ammount
 * so apply it to the header and the first divs inside the accordion-content
 */
.views-accordion-item .accordion-content div,
.views-accordion-item .accordion-header,
h3.accordion-header {
 padding: 0.5em 1em;
}
.views-accordion-item .accordion-content div div {
  padding: 0;
}

/* header mouse-over and section-opened states (only when js is enabled)*/
.views-accordion-item .accordion-header-hover,
h3.accordion-header-hover {
  border-color: #fff;
}
.views-accordion-item .accordion-header-active,
h3.accordion-header-active {
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* Buttons */
span.stop-accordion,
span.toggleAccordion {
  display: block;
  text-align: right;
}