<div id="font-settings" class="page" hidden>
  <div class="close-button"></div>
  <h1 i18n-content="fontSettingsPage"></h1>
  <div class="content-area">
    <section>
      <h3 i18n-content="fontSettingsStandard"></h3>
      <div class="font-setting-container">
        <div class="font-input-div">
          <div>
            <select id="standard-font-family" class="font-input"
                data-type="string" metric="Options_ChangeStandardFont"
                pref="webkit.webprefs.fonts.standard.Zyyy">
            </select>
          </div>
          <div>
            <input id="standard-font-size" type="range" min="0" max="24"
                pref="webkit.webprefs.default_font_size">
            <div>
              <span i18n-content="fontSettingsSizeTiny"></span>
              <span i18n-content="fontSettingsSizeHuge"
                  class="font-settings-huge">
              </span>
            </div>
          </div>
        </div>
        <div id="standard-font-sample" class="font-sample-div"></div>
      </div>
    </section>
    <section>
      <h3 i18n-content="fontSettingsSerif"></h3>
      <div class="font-setting-container">
        <div class="font-input-div">
          <div>
            <select id="serif-font-family" class="font-input" data-type="string"
                pref="webkit.webprefs.fonts.serif.Zyyy"
                metric="Options_ChangeSerifFont">
            </select>
          </div>
        </div>
        <div id="serif-font-sample" class="font-sample-div"></div>
      </div>
    </section>
    <section>
      <h3 i18n-content="fontSettingsSansSerif"></h3>
      <div class="font-setting-container">
        <div class="font-input-div">
          <div>
            <select id="sans-serif-font-family" class="font-input"
                data-type="string" metric="Options_ChangeSansSerifFont"
                pref="webkit.webprefs.fonts.sansserif.Zyyy">
            </select>
          </div>
        </div>
        <div id="sans-serif-font-sample" class="font-sample-div"></div>
      </div>
    </section>
    <section>
      <h3 i18n-content="fontSettingsFixedWidth"></h3>
      <div class="font-setting-container">
        <div class="font-input-div">
          <div>
            <select id="fixed-font-family" class="font-input" data-type="string"
                pref="webkit.webprefs.fonts.fixed.Zyyy"
                metric="Options_ChangeFixedFont">
            </select>
          </div>
        </div>
        <div id="fixed-font-sample" class="font-sample-div"></div>
      </div>
    </section>
    <section>
      <h3 i18n-content="fontSettingsMinimumSize"></h3>
      <div class="font-setting-container">
        <div class="font-input-div">
          <div>
            <input id="minimum-font-size" type="range" min="0" max="15"
                pref="webkit.webprefs.minimum_font_size">
            <div>
              <span i18n-content="fontSettingsSizeTiny"></span>
              <span i18n-content="fontSettingsSizeHuge"
                  class="font-settings-huge">
              </span>
            </div>
          </div>
        </div>
        <div id="minimum-font-sample" class="font-sample-div"></div>
      </div>
    </section>
    <section>
      <h3 i18n-content="fontSettingsEncoding"></h3>
      <div class="font-input-div">
        <div>
          <select id="font-encoding" data-type="string"
              pref="intl.charset_default"
              metric="Options_ChangeFontEncoding">
          </select>
        </div>
      </div>
    </section>
  </div>
  <div class="action-area">
    <div class="button-strip">
      <span id="advanced-font-settings-install" hidden
          i18n-values=".innerHTML:advancedFontSettingsInstall"></span>
      <a id="advanced-font-settings-options" href="#" hidden
          i18n-content="advancedFontSettingsOptions"></a>
      <span class="spacer"></span>
      <button id="font-settings-confirm" class="default-button"
          i18n-content="done">
      </button>
    </div>
  </div>
</div>