<div class="style-selector">
  <div class="setting-items font clearFix" data-dojo-attach-point="fontSetting">
    <div class="label jimu-float-leading" title="${nls.font}">${nls.font}</div>
    <div class="setting-wapper jimu-float-trailing">
      <select data-dojo-attach-point="fontSelect" data-dojo-props='style:{width:"100%"}' data-dojo-type="jimu/dijit/formSelect" aria-label="${nls.font}"></select>
    </div>
  </div>
  <div class="setting-items text-size clearFix" data-dojo-attach-point="textSizeSetting">
    <div class="label jimu-float-leading" title="${nls.textSize}">${nls.textSize}</div>
    <div class="setting-wapper jimu-float-trailing">
      <div class="text-size-group jimu-float-leading">
        <!--role and aria-label added run time-->
        <select data-dojo-type="dijit/form/ComboBox" data-dojo-attach-point="textSizeSelect"></select>
      </div>
      <div class="text-size-group jimu-float-leading">
        <div class="sliderbar" data-dojo-attach-point="sliderBar"></div>
      </div>
    </div>
  </div>
  <div class="setting-items text-color clearFix" data-dojo-attach-point="textColorSetting">
    <div class="label jimu-float-leading" title="${nls.textColor}">${nls.textColor}</div>
    <div class="setting-wapper jimu-float-trailing">
      <div class="font-group jimu-float-leading">
        <div class="text-color-btn" data-dojo-attach-point="textColorBtn"></div>
      </div>
      <div class="font-group font-group-btns jimu-float-leading">
        <div class="font-btn jimu-float-leading bold" data-dojo-attach-point="bold" tabindex="0" role="button" aria-label="bold" aria-pressed="false"></div>
        <div class="font-btn jimu-float-leading italic" data-dojo-attach-point="italic" tabindex="0" role="button" aria-label="italic" aria-pressed="false"></div>
        <div class="font-btn jimu-float-leading underline" data-dojo-attach-point="underline" tabindex="0" role="button" aria-label="underline" aria-pressed="false"></div>
      </div>
    </div>
  </div>
  <div class="setting-items text-color clearFix" data-dojo-attach-point="transparencySetting">
    <div class="label jimu-float-leading" title="${nls.transparency}">${nls.transparency}</div>
    <div class="setting-wapper jimu-float-trailing">
      <div class="font-group jimu-float-leading">
        <div class="text-color-btn" data-dojo-attach-point="transparencySlider"></div>
      </div>      
    </div>
  </div>  
  <div class="setting-items halo-size clearFix" data-dojo-attach-point="haloSetting">
    <div class="label jimu-float-leading" title="${nls.halo}">${nls.halo}</div>
    <div class="setting-wapper jimu-float-trailing">
      <div class="halo-size-group jimu-float-leading">
        <select data-dojo-type="jimu/dijit/formSelect" data-dojo-attach-point="haloSizeSelect" aria-label="${nls.halo}"></select>
      </div>
      <div class="halo-size-group jimu-float-leading">
        <div class="halo-color-btn" data-dojo-attach-point="haloColorBtn" aria-label="${nls.halo}"></div>        
      </div>
      <div class="halo-size-group jimu-float-leading">
        <div class="label" title="${nls.show}">${nls.show}</div>
      </div>
      <div class="halo-size-group jimu-float-leading">
        <input class="halo-toggle" data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="showHalo" checked="true" aria-label="${nls.show}"/>
      </div>
    </div>
  </div>
</div>