<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:widget="urn:import:org.rstudio.core.client.widget">

   <ui:style>
      .outer input {
         height: 20px !important;
      }

      .control {
         width: 275px;
         border: 1px solid #888 !important;
         background-color: white;
         margin: 0 0 3px 0;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         font-size: 12px;
      }

      .label {
         display: inline-block;
         width: 110px;
      }

      .suggestions {
         width: 192px;
         margin-bottom: 24px;
      }

      .start2 {
         margin-left: 110px;
      }

      .col2_3 {
         width: 275px;
      }

      .smallTopMargin {
         margin-top: 4px;
      }

      .bigTopMargin {
         margin-top: 18px;
      }

   </ui:style>

   <g:HTMLPanel styleName="{style.outer}">

      <div>
         <div class="{style.label}">Not in dictionary:
         </div><g:TextBox ui:field="txtDisplay_"
                          styleName="{style.control}"
                          readOnly="true"/>
      </div>
      <div class="{style.smallTopMargin} {style.start2} {style.col2_3}">
         <widget:ThemedButton ui:field="btnSkip_"/><div style="display:inline-block;width:8px"/><widget:ThemedButton ui:field="btnIgnoreAll_"/>
         <div style="float: right">
            <widget:ThemedButton ui:field="btnAdd_"/>
         </div>
      </div>
      <div>
         <div class="{style.bigTopMargin} {style.label}">Change to:
         </div><g:TextBox ui:field="txtReplacement_" styleName="{style.control}" />
      </div>
      <div class="{style.smallTopMargin} {style.start2} {style.col2_3}">
         <g:ListBox
               ui:field="lstSuggestions_"
               styleName="{style.control} {style.suggestions}"
               visibleItemCount="5"/>
         <div style="float: right">
            <div><widget:ThemedButton ui:field="btnChange_"/></div>
            <div style="margin-top: 2px"><widget:ThemedButton ui:field="btnChangeAll_"/></div>
         </div>
      </div>
   </g:HTMLPanel>

</ui:UiBinder>