div.accordion-wrapper
{
   margin-top: 1em;
}

div.accordion-wrapper > h4
{
   background-color: #00b223;
   color: #fff;
   font-family: inherit;
   font-variant: small-caps;
   margin: 0;
   padding: .75em 1em;
   text-transform: capitalize;
}

ul.accordion
{
   cursor: default;
}

ul.accordion,
ul.accordion ul
{
   margin: 0;
   padding: 0;
}

ul.accordion li
{
   list-style-type: none;
}

ul.accordion > li
{
   margin-bottom: .5em;
   overflow: hidden;
   padding: 0 1em;      /* top/bottom padding is set on H4 child */
   position: relative;
}

ul.accordion > li.temporary
{
   opacity: .5;
}

ul.accordion > li.collapsed
{
   -webkit-transition: height 500ms ease-out;
      -moz-transition: height 500ms ease-out;
       -ms-transition: height 500ms ease-out;
        -o-transition: height 500ms ease-out;
           transition: height 500ms ease-out;
}

ul.accordion > li.expanded
{
   -webkit-transition: height 500ms ease-in;
      -moz-transition: height 500ms ease-in;
       -ms-transition: height 500ms ease-in;
        -o-transition: height 500ms ease-in;
           transition: height 500ms ease-in;
}

ul.accordion > li:before
{
   color: #f00;
   content: "x";        /* use kbm-symbol font to pacify xPloder */
   cursor: default;
   float: right;
   font-family: kbm-symbol;
   font-size: 1.5em;
   line-height: 0;
   margin-top: .85em;
   -webkit-transition: -webkit-transform 500ms ease-out;
      -moz-transition:    -moz-transform 500ms ease-out;
       -ms-transition:     -ms-transform 500ms ease-out;
        -o-transition:      -o-transform 500ms ease-out;
           transition:         transform 500ms ease-out;
}

ul.accordion > li.expanded:before
{
   -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
           transform: rotate(-90deg);
}

ul.accordion > li > h4
{
   background-color: #fd0;
   color: #00f;
   cursor: default;
   font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-variant: small-caps;
   letter-spacing: .1em;
   margin: 0 -1em;         /* negate padding on parent LI for page run-off */
   padding: .75em 1em;     /* restore left/right spacing */
}

ul.accordion > li > h4 > span
{
   display: inline-block;
   -webkit-hyphens: none;
      -moz-hyphens: none;
       -ms-hyphens: none;
        -o-hyphens: none;
           hyphens: none;
   margin-bottom: -.25em;
   max-width: calc(100% - 2em);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

ul.accordion > li > .sensor
{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 2.75em;
}

@media screen and (max-width: 767px)
{
   .accordion-wrapper
   {
      margin: 0 -1em;
   }

   div.accordion-wrapper > h4,
   ul.accordion > li > h4
   {
      padding-left: 4em;
   }
}