/* звездочка означает, что стиль применяется ко всем html элементам */
* {margin: 0; padding: 0;}
/* для html, body  устанавливаем ширину, высоту и цвет заднего фона */
html, body {width: 100%; height: 100%; background-color: #f0f0f0; }

#form_A {
    /* Абсолютное позиционирование - будем перемещать его сами */
    position: absolute;
    /* Перемещаем направо и вниз на половину экрана */
    left: 50%; top: 50%;
    /* Выставляем ширину и высоту блока */
    width: 300px;  height: 150px;
    /* Перемещаем налево на половину ширину, и вверх - на половину высоту */
    margin-left: -150px; margin-top: -75px;
    /* Устанавливаем цвет заднего фона в серый */
    background-color: #ccc;
      
    /* Устанавливаем бордюры */
    border-left: 2px solid #999; border-top: 2px solid #999;
    border-right: 2px solid #333; border-bottom: 2px solid #333;
    /* Благодаря ним добиваемся 3D эффекта объемности */
}

/* кнопка с классом button в блоке id=form_A */
#form_A .button {
    /* устанавливаем задний фон в белый */
    background-color: #fff;
    /* цвет текста - черный */
    color: #000;
    /* стиль шрифта - жирный */
    font-weight: bold;
    /* бордюр вокруг на 2 пиксела темного цвета */
    border: 2px solid #666;
}

/* стиль для кнопки, над которым стоит мышь */
#form_A .button:hover {
    /* цвет заднего фона меняем на черный */
    background-color: #000;
    /* цвет текста - на белый */
    color: #fff;
    /* бордюр светлый */
    border: 2px solid #bbb;
}

#form_A .field {
    /* цвет заднего фона - черный */
    background-color: #000;
    /* цвет текста - белый*/
    color: #fff;
    /* жирный */
    font-weight: bold;
    /* однопиксельный бордюр темного цвета*/
    border: 1px solid #333;
}

#form_A .field:hover {
    /* цвет заднего фона меняем на белый */
    background-color: #fff;
    /* цвет текста - на черный */
    color: #000;
    /* бордюр делаем по-светлее*/
    border: 1px solid #999;
}