<style type="text/css">
  .output_subarea.rendered_html {
    max-width: 100%;
    padding: 0;
  }
  .pixiedust {
    border: 1px solid #ececec;
    border-radius: 3px;
    margin: 10px 0;
    padding: 10px;
    
    color: #333333;
    font-size: small;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: normal;
  }
  .pixiedust .display-type-button:not(:first-child) {
    margin-left: 10px !important;
  }
  .pixiedust .btn-default {
    border-radius: 0;
  }
  .pixiedust-toolbar .btn-default.focus,
  .pixiedust-toolbar .btn-default:focus,
  .pixiedust-toolbar .btn-default:hover {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
  }
  .pixiedust .dropdown-menu {
    padding: 0;
  }
  .pixiedust .dropdown-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }
  .pixiedust .dropdown-menu li {
    cursor: pointer;
    padding: 8px 12px;
  }
  .pixiedust .dropdown-menu li:hover {
    background-color: #337ab7;
    color: #ffffff;
    cursor: pointer;
  }
  .pixiedust .dropdown-menu li > span {
    display: inline-block;
    margin-left: 10px;
  }
  .pixiedust .btn .fa-chevron-down {
    margin-left: 25px;
  }
  .pixiedust .btn-group.open .dropdown-toggle {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
  }
  .pixiedust .modal-header {
    background-color: #337ab7;
    color: #ffffff;
  }
  .pixiedust .modal-header .close {
    color: #fff;
    opacity: 1;
    text-shadow: none;
  }
  .pixiedust .modal-header .close:hover {
    opacity: 0.5;
  }
  .pixiedust .modal-body {
    padding: 25px;
  }
  .pixiedust .modal-footer .btn {
    min-width: 75px;
  }
</style>

<div class="pixiedust">
  <div class="pixiedust-toolbar btn-group" role="group" style="margin-bottom:15px">
  {%for key, menuInfoList in menuTree.iteritems()%}
    {%if menuInfoList|length==1%}
      <a class="btn btn-small btn-default display-type-button" id="menu{{this.getPrefix(menuInfoList[0])}}" title="{{menuInfoList[0]['title']}}">
        <i class="fa {{menuInfoList[0]['icon']}}"></i>
      </a>
      {{this._getMenuHandlerScript(menuInfoList[0])}}
    {%elif menuInfoList|length>1%}
      <div class="btn-group btn-small display-type-button">
        <a class="btn btn-small dropdown-toggle btn-default" data-toggle="dropdown" title="{{this.getCategoryTitle(key)}}">
          <i class="fa {{this.getCategoryIconClass(key)}}"></i>
          <i class="fa fa-chevron-down"></i>
        </a>
        <div class="dropdown-menu" role="menu" style="white-space:nowrap">
          <ul>
          {%for menuInfo in menuInfoList%}
            <li id="menu{{this.getPrefix(menuInfo)}}">
              <i class="fa {{menuInfo['icon']}}"></i>
              <span>{{menuInfo['title']}}</span>
              {{this._getMenuHandlerScript(menuInfo)}}
            </li>
          {%endfor%}
          </ul>
        </div>
      </div>
    {%endif%}
  {%endfor%}
  </div>
  <div id="wrapperJS{{this.getPrefix()}}"></div>
  <div id="wrapperHTML{{this.getPrefix()}}" style="min-height:100px">
<div>