<div class="container-fluid">

​

  <div id="theTabPanel">

    <div>

      <a id="hdr-africa">

        Africa

      </a>

      <div id="pane-africa">

        <ul>

          <li>Algeria</li>

          <li>Angola</li>

          <li>Benin</li>

          <li>Botswana</li>

        </ul>

      </div>

    </div>

    <div>

      <a id="hdr-america" class="wj-state-active">

        America

      </a>

      <div id="pane-america">

        <ul>

          <li>Canada</li>

          <li>Chile</li>

          <li>Mexico</li>

          <li>United States</li>

        </ul>

      </div>

    </div>

    <div>

      <a id="hdr-asia">

        Asia

      </a>

      <div id="pane-asia">

        <ul>

          <li>China</li>

          <li>Korea</li>

          <li>India</li>

          <li>Japan</li>

        </ul>

      </div>

    </div>

    <div>

      <a id="hdr-europe">

        Europe

      </a>

      <div id="pane-europe">

        <ul>

          <li>Austria</li>

          <li>England</li>

          <li>France</li>

          <li>Germany</li>

          <li>Netherlands</li>

          <li>Switzerland</li>

        </ul>

      </div>

    </div>

    <div>

      <a id="hdr-oceania">

        Oceania

      </a>

      <div id="pane-oceania">

        <ul>

          <li>Australia</li>

          <li>Fiji</li>

          <li>New Zealand</li>

          <li>Samoa</li>

        </ul>

      </div>

    </div>

  </div>

  <div>

    <label for="autoSwitch">

      autoSwitch

    </label>

    <input id="autoSwitch" type="checkbox" checked="checked">

  </div>

​

</div>

@font-face {

  font-family: 'S-CoreDream-3Light';

  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}

​

body {

  margin: 20px;

  font-family: 'S-CoreDream-3Light';

}

​

.container-fluid{

  border:1px solid #ededed;

  padding:10px;

  border-radius:10px;

}

​

.wj-tabpane {

  padding: 12px;

}

​