CSS Tabs - помогите отредактировать

Необходимо сделать табы на css. Нагуглил хороший образец: http://shpargalkablog.ru/2012/03/css-tabs.html

В моём случае это первый пример "CSS Tabs с переходом по клику".

скрин: http://shot.qip.ru/008ywg-2uX0nxUGn/

Код:

css

<style>

.korpus > div, .korpus > input { display: none; }



.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }

.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }



.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }

</style>

html

<div class="korpus">

  <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Дополнительно</label>

  <div>первая вкладка</div>

  <div>вторая вкладка</div>

  <div>третья вкладка</div>

</div>

-------------------

Необходимо перенести вкладки CSS, HTML, Дополнительно (по которым кликать) вниз, под блок с контентом.

Пробовал делать вот так:

<div class="korpus"><input type="radio" name="odin" checked="checked" id="vkl1"/><input type="radio" name="odin" id="vkl2"/>



    <div>Блок 1</div>

    <div>Блок 2</div>



<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">>Вкладка 1</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Вкладка 2</label>



        </div>

В данном случае вкладки как и нужно появляются снизу, вот только на месте блоков пока не кликниш на какую-то вкладку пустота. Нужно чтоб по умолчанию первый блок выводился.

Прошу помочь, буду рад любой информации.