/*
    Картинка пользователя (Userpic, Аватар).

    Это любая картинка вписанная посередине в квардат 25x25 (small), 50x50 (middle) или 100x100 (normal).
    Размер картинки не больше описывающего её квадрата.

    Картинка внутри может быть любого формата (JPEG, GIF, Animated GIF, PNG-8, PNG-24).

    Код:
    <a class="b-userpic b-userpic-normal" href=""><img src="male00-middle.png" alt=""/><i></i></a>
    <b class="b-userpic b-userpic-normal"><img src="male00-middle.png" alt=""/><i></i></b>

    Решение вертикального выравнивания взято из http://cssing.org.ua/2005/07/14/vertical-align-middle/
    Вот пример: http://cssing.org.ua/examples/valign/index1.html

    Суть метода:

    Рядом с картинкой кладём элемент <i>. Картинке и <i> задаём vertical-align: middle.
    И делаем <i> строчно-блочным элементом с высотой 100%;

    --------- b-userpic ----------|
    |                  i          |
    |                  i          |
    |           |-----|i          |
    |           | IMG |i          |
    |           |-----|i          |
    |                  i          |
    |                  i          |
    |-----------------------------|

    Фактически <i> увеличивает высоту строки до высоты контейнера,
    а потом они выстраиваются друг рядом с другом из-за vertical-align: middle.

*/ /**/

/* Картинка пользователя (begin) */ /**/
    .b-userpic
    {
        display: -moz-inline-box;
        display: inline-block;

        text-align: center;
    }

    .b-userpic__img, .b-userpic__i
    {
        vertical-align: middle;
    }

    .b-userpic__img
    {
        border: 0;
    }

    .b-userpic__i
    {
        display: -moz-inline-box;
        display: inline-block;

        height: 100%;
    }
/* Картинка пользователя (end) */ /**/