Типовой CSS-файл для VcorpJS
Подключение CSS-файла
Как обычно, CSS можно подключать внешним файлом и/или непосредственно на странице:
<link rel="stylesheet" type="text/css" href="/.../vcorp_js.css"/>
<style>...</style>
VcorpJS так же умеет создавать и удалять пользовательские стили через передачу строки CSS-стилей с созданием и удаление тега style.
Советую не загромождать CSS-код ненужными префиксами "-moz", "-webkit", "-ms" и т.д. - для названий стилей, которые известны всем браузерам уже много лет, используйте стандартные W3C-названия. Если браузер не поддерживает, например, стиль "box-shadow", то вы никак не заставите его отображать этот стиль, какие-бы префиксы не ставили :)
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.
CSS-классы VcorpJS
Все названия CSS-классов, используемых VcorpJS при работе, начинаются с префикса "pb_" - приведённые ниже классы не должны использоваться для других целей.
В типовой CSS-файл встроено фоновое изображение - CSS-спрайт в виде base64-строки.
Автор постарался сделать CSS-файл минимальным, важна последовательность описания классов и стилей, её лучше не менять во избежание проблем.
Стили VcorpJS у автора всегда завершают основные стили для страницы и могут подправляться для оптимизации работы и размера.
Невидимый HTML-элемент - этот класс обязательно должен присутствовать в CSS-файле.
/*
Абсолютный блок с нулевыми размерами и положением
Значение "display:none" не нужно указывать, если требуется, чтобы содержимое блока рендерилось браузером.
*/
.pb_hidden {
position:absolute; top:0; left:0; width:0; height:0;
visibility:hidden; overflow:hidden;
}
CSS для галереи изображений - эти классы обязательны только при использовании всплывающих фото (функция .zoomImg() )
См. так же - Визуальный пример галереи изображений.
/*
.pb_ismall - для малого изображения (предпросмотр)
Этот класс можно задавать произвольно - ниже приведён вариант с CSS-анимацией
*/
.pb_ismall {
position:relative; cursor:pointer;
margin:15px; padding:0; width:150px; height:100px;
border:solid 1px #c8c8c8; border-radius:5px; box-shadow:1px 1px 5px #000000;
transition: border 0.3s ease-out 0s, box-shadow 0.3s ease-out 0s; /* CSS-анимация */
}
.pb_ismall:hover {
margin:10px 20px 20px 10px;
border:solid 1px #c80000;
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.8);
}
/* .pb_ibig - для большого всплывающего изображения */
.pb_ibig {
position:absolute; border:solid 5px #c8c8c8; border-radius:5px;
}
/*
.pb_itxt - Заголовок с текстом для большого всплывающего изображения.
У этого блока всегда принудительно выставляется position:absolute; и cursor:pointer;
Размеры и положение вычисляются во время показа изображения.
*/
.pb_itxt {
padding:0 5px; height:30px; color:#000000;
font:400 13px arial; text-align:center; line-height:16px;
border-radius:5px 5px 0 0; background:#c8c8c8;
}
/*
Классы и стили для CSS-анимации при смене/перелистывании изображений.
@keyframes - анимация работает во время всплывания изображения (1 секунду).
У элементов с классами .pb_inext, .pb_iprev всегда принудительно выставляется position:absolute;
их размеры и положение вычисляются во время показа изображения.
*/
@keyframes pb_inextprev {
0% { opacity:1; background:#ffffff; }
100% { opacity:0; background:transparent; }
}
.pb_inext, .pb_iprev {
width:0; height:0; color:#000000; opacity:0;
border-top:25px solid transparent; border-bottom:25px solid transparent;
animation-name:pb_inextprev; animation-duration:1s;
transition: opacity 0.3s ease-out 0s;
}
.pb_iprev { border-right:50px solid #000000; }
.pb_inext { border-left:50px solid #000000; }
.pb_inext:hover, .pb_iprev:hover { opacity:1; background:#ffffff; }
CSS для блока ротации изображений - этот класс обязателен только при использовании функции .imgBlock()
См. так же - Визуальный пример блока ротации изображений.
/* .pb_irotation - для блока ротации изображений - функция imgBlock() */
.pb_irotation {
position:relative; margin:0; padding:0; top:0; left:0; border:none;
}
CSS для цифрового поля Spinner - эти классы обязательны только при использовании HTML-элементов и функции .spinner()
См. так же - Визуальный пример создания и работы Spinner-счётчика.
.pb_spinner {
position:relative; top:0; left:0; width:50px; height:20px; border:none;
}
.pb_spinner input {
position:absolute; padding:0 5px;
top:0; left:0; width:30px; height:18px;
font:bold 13px arial; line-height:14px; text-align:center;
color:#000000; border:solid 1px #c8c8c8; background:#ffffff;
}
.pb_sp_t,.pb_sp_b {
position:absolute; cursor:pointer;
left:44px; width:17px; height:9px; border:none;
}
.pb_sp_t { top:0; background-position: -126px -77px; }
.pb_sp_t:hover { background-position: -143px -77px; }
.pb_sp_b { top:11px; background-position: -126px -88px; }
.pb_sp_b:hover { background-position: -143px -88px; }
CSS для флажков-переключателей с подписью - эти классы обязательны только при использовании HTML-элементов и функции .uCheckeds()
См. так же - Визуальный пример создания и работы флажков checkbox.
/* Блочные элементы - флажки */
.pb_checked_true, .pb_checked_false {
position:relative; display:block; float:left; cursor:pointer;
margin:0 0 0 10px; padding:0 0 0 20px; width:65px; height:23px;
font:normal 13px arial; line-height:23px; border:solid 1px #ffffff; border-radius:4px;
}
.pb_checked_true {
font-weight:bold; color:#6f9300; background-color:#f8f8f8;
}
.pb_checked_false {
color:#55646d; background-color:#eeeeee;
}
/* Вложенные DIV-блоки (изображения флажков) */
.pb_checked_true div, .pb_checked_false div {
position:absolute; background-position:0 -65px;
left:3px; top:5px; width:12px; height:12px;
}
/* Вложенные SPAN-элементы (подписи к флажкам) */
.pb_checked_true span, .pb_checked_false span {
color:inherit; font:inherit;
}
.pb_checked_true:hover, .pb_checked_false:hover {
background-color:#ffffff;
}
/* Позиция изображения из CSS-спрайта для вложенных DIV-блоков */
.pb_checked_true .pb_ch1 { background-position: -12px -65px; }
.pb_checked_true .pb_ch2 { background-position: -24px -65px; }
.pb_checked_true .pb_ch3 { background-position: -36px -65px; }
.pb_checked_true .pb_ch4 { background-position: -48px -65px; }
.pb_checked_true .pb_ch5 { background-position: -60px -65px; }
.pb_checked_true .pb_ch6 { background-position: -72px -65px; }
.pb_checked_true .pb_ch7 { background-position: -84px -65px; }
.pb_checked_true .pb_ch8 { background-position: -96px -65px; }
.pb_checked_true .pb_ch9 { background-position: -108px -65px; }
/* Цвет текста для вложенных SPAN-элементов - подписей к флажкам */
.pb_checked_true .pb_chs1 { color: #0505c1; }
.pb_checked_true .pb_chs2 { color: #0395c1; }
.pb_checked_true .pb_chs3 { color: #a40302; }
.pb_checked_true .pb_chs4 { color: #ff7904; }
.pb_checked_true .pb_chs5 { color: #ff0303; }
.pb_checked_true .pb_chs6 { color: #387a54; }
.pb_checked_true .pb_chs7 { color: #6f9300; }
.pb_checked_true .pb_chs8 { color: #ffff00; }
.pb_checked_true .pb_chs9 { color: #c59605; }
CSS для combobox - эти классы обязательны только при использовании HTML-элементов combobox и функций работы с ними.
См. так же - Визуальный пример комбинированного списка выбора combobox.
/* Блочные элементы - combobox */
.pb_combobox {
position:relative; display:block;
width:350px; height:25px;
background:transparent; overflow:visible;
}
/* Вложенное поле ввода input type="text" */
.pb_combobox input {
position:absolute; padding:0 5px;
top:0; left:0; width:305px; height:22px; color:#000000;
font:normal 13px arial; line-height:20px; text-align:left;
border:solid 1px #808080; border-radius:5px; background:#ffffff;
}
/* Вложенный блок раскрытия/скрытия списка ваирантов */
.pb_cb_image {
position:absolute; display:block; cursor:pointer;
top:0; right:0; width:25px; height:22px; color:#ffffff;
font:bold 20px arial; line-height:22px; text-align:center;
border:solid 1px #c8c8c8; border-radius:3px; background:#808080;
}
.pb_cb_image:hover { color:#808080; background:#ffffff; }
/* Блок с вариантами быстрого выбора (анимированный) */
.pb_cb_select {
position:absolute; padding:0; z-index:1;
top:30px; left:0; width:350px; height:0; max-height:150px;
border:solid 1px #808080; border-radius:5px; background:#ffffff;
overflow-y:auto; box-shadow:3px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Вложенные блоки с вариантами быстрого выбора */
.pb_cb_select .pb_cb_option {
position:relative; clear:both; cursor:pointer; color:#000000;
padding:3px 5px; height:16px; font:normal 13px arial;
line-height:15px; text-align:left; border-radius:5px;
}
.pb_cb_select .pb_cb_option:hover { background:#eeeeee; }
CSS для анимационного меню - эти классы обязательны только при использовании HTML с меню и функции .iMenu().
Здесь приведён вариант, аналогичный навигационному меню на сайте vcorp.ru.
Обязательно должен быть указан (явно или неявно) и доступен для чтения стиль line-height, по высоте строк рассчитываются некоторые параметры.
См. так же - Визуальные примеры работы меню.
/* Порядок следования CSS - правил важен! */
/* Все вложенные элементы menu */
menu {
margin:0; padding:0; width:450px;
text-align:left; overflow:hidden;
}
/* Элемент меню (строка или подблок) */
menu li {
position:relative; padding:0 0 0 35px; cursor:pointer;
list-style-type:none; font:normal 13px arial; line-height:20px;
color:#222222; overflow:hidden;
}
/* Вложенные DIV-блоки (изображения пунктов и разделов) */
menu li div {
position:absolute; left:0; top:2px; width:32px; height:16px;
}
/* Фоновые изображения для DIV пунктов меню (по-умолчанию) */
menu li .pb_m1 { background-position: 0 -18px; }
menu li .pb_m2 { background-position: -32px -18px; }
menu li .pb_m3 { background-position: -64px -18px; }
menu li .pb_m4 { background-position: -96px -18px; }
menu li .pb_m5 { background-position: -128px -18px; }
/* Вложенные ссылки и SPAN-элементы */
menu li a {
font:normal 13px arial; text-decoration:underline;
line-height:19px; color:#a0a0a0;
}
menu li span {
font-weight:normal; line-height:19px; color:#222222;
}
menu li a:hover, menu li span:hover { color:#a40302; }
/* pb_mc - закрытый раздел, pb_mo - раскрытый раздел */
.pb_mc { height:20px; }
/* pb_ms - выбранный пункт, pb_mi - остальные пункты */
.pb_ms { background:#e0e0e0; }
/* .pb_ms { background:#e0e0e0; }
.pb_ms:hover,.pb_mi:hover { background:#e0e0e0; } */
/* Фоновые изображения для DIV закрытых блоков меню */
.pb_mc > .pb_m1 { background-position: 0 -2px; }
.pb_mc > .pb_m2 { background-position: -32px -2px; }
.pb_mc > .pb_m3 { background-position: -64px -2px; }
.pb_mc > .pb_m4 { background-position: -96px -2px; }
.pb_mc > .pb_m5 { background-position: -128px -2px; }
/* Фоновые изображения для DIV открытых блоков меню */
.pb_mo > .pb_m1 { background-position: 0 -34px; }
.pb_mo > .pb_m2 { background-position: -32px -34px; }
.pb_mo > .pb_m3 { background-position: -64px -34px; }
.pb_mo > .pb_m4 { background-position: -96px -34px; }
.pb_mo > .pb_m5 { background-position: -128px -34px; }
/* Фоновые изображения для DIV активных пунктов меню */
.pb_ms > .pb_m1 { background-position: 0 -50px; }
.pb_ms > .pb_m2 { background-position: -32px -50px; }
.pb_ms > .pb_m3 { background-position: -64px -50px; }
.pb_ms > .pb_m4 { background-position: -96px -50px; }
.pb_ms > .pb_m5 { background-position: -128px -50px; }
/* Фоновые изображения для DIV обычных пунктов меню */
.pb_mi > .pb_m1 { } /* то-же самое, что и "menu li .pb_m1" (см. выше) */
...
/* Дополнительные классы для SPAN-элементов меню */
menu li .pb_ms1 { }
menu li .pb_ms2 { }
menu li .pb_ms3 { }
menu li .pb_ms4 { }
menu li .pb_ms5 { }
CSS для Календаря - эти классы обязательны только при использовании функции работы с календарём .calendar().
См. так же - Визуальный пример календаря (по кнопкам).
/*
Блочный элемент - перемещаемый блок с календарём.
У этого блока (класс .pb_calendar) всегда принудительно выставляется position:absolute;
*/
.pb_calendar {
width:270px; height:300px; color:#000000;
border:solid 1px #c8c8c8; border-radius:5px; background:#f8f8f8;
}
/* Вложенный блок - заголовок (за него можно перемещать весь блок) */
.pb_cl_head {
position:absolute; cursor:pointer;
left:0; top:0; right:30px; height:30px;
font:normal 13px arial; line-height:30px;
text-align:center; border-bottom:solid 1px #c8c8c8;
}
/* Вложенный блок закрытия календаря с фоновым изображением из CSS-спрайта */
.pb_cl_head_del {
position:absolute; display:block;
top:0; right:0; width:30px; height:30px;
border-left:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;
background-position:-30px -76px;
}
/* Вложенный блок для выбора режима (месяцы/годы/столетия) */
#pb__cl_ym {
position:absolute; cursor:pointer; background:#eeeeee;
top:31px; left:40px; right:40px; height:30px;
font:bold 14px arial; line-height:30px; text-align:center;
}
#pb__cl_ym:hover { background:#e0e0e0; }
/* Класс для вложенных блоков перелистывания (месяцы/годы/столетия) */
.pb_cl_head_ym_lr {
position:absolute; cursor:pointer; background:#eeeeee;
top:31px; width:40px; height:30px;
font:normal 20px arial; line-height:25px; text-align:center;
}
.pb_cl_head_ym_lr:hover { background:#e0e0e0; }
/* Вложенный блок показа информации о столетиях/годах/месяцах/днях */
#pb__cl_body {
position:absolute; padding:5px; border-top:solid 1px #c8c8c8;
left:0; top:60px; right:0; bottom:30px;
}
/* Класс для вложенных блоков - кнопок календаря */
.pb_cl_bottom {
position:absolute; cursor:pointer; background:#eeeeee;
bottom:0; width:50%; height:28px;
font:normal 14px arial; line-height:28px; text-align:center;
border:solid 1px #c8c8c8; border-radius:0 0 5px 5px;
}
.pb_cl_bottom:hover { background:#e0e0e0; }
/* Таблица показа информации о столетиях/годах/месяцах/днях */
.pb_cl_table, .pb_cl_table th, .pb_cl_table td {
padding:0; font:bold 14px arial; text-align:center;
border:solid 1px transparent; border-spacing:0; border-radius:4px;
}
.pb_cl_table { width:100%; height:100%; }
.pb_cl_table th { width:14%; height:14%; }
.pb_cl_table td { width:14%; height:14%; }
/* Ячейка таблицы для доступного элемента (выбора) */
.pb_cl_table .pb_day { cursor:pointer; }
/* Ячейка таблицы для НЕдоступного элемента (выбора) */
.pb_cl_table .pb_dayno { color:#909090; }
/* Ячейка таблицы для активного элемента */
.pb_cl_table .pb_daysel { cursor:pointer; border:solid 1px #000000; }
.pb_cl_table .pb_day:hover, .pb_cl_table .pb_daysel:hover { border:solid 1px #808080; }
CSS для оконной системы. Панель окон.
Подробнее см. Работа с панелью окон
/* Если панель видима и имеет position: absolute или fixed, то её можно перемещать. */
.pb_win_panel {
cursor:pointer; position:absolute; /* fixed / relative */
left:0px; top:0px; min-width:380px; height:30px;
border:solid 1px #000080; background:#c8c8c8;
/* visibility:hidden; display:none;*/
}
/*
На панели окон автоматически выводятся значки окон - блочные элементы.
Для них всегда position:absolute; Размеры и положение автоматические.
*/
.pb_win_panel_elem, .pb_win_panel_elem_sel {
cursor:pointer; width:100px; height:26px;
overflow:hidden; border:solid 1px #000080; background:#eeeeee;
}
.pb_win_panel_elem_sel {
border:solid 1px #800000; background:#ffc8c8;
background:linear-gradient(to bottom,#fff0f0,#ffc8c8);
}
.pb_win_panel_elem table tr td, .pb_win_panel_elem_sel table tr td {
font:bold 12px arial; text-align:center; color:inherit;
white-space:nowrap; text-overflow:ellipsis;
}
CSS для оконной системы. Классы для окон.
Подробнее см. Настройка окон
/* Обычное и активное окно. */
.pb_win, .pb_win_sel {
position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
padding:0; margin:0; background:#eeeeee;
border:solid 1px #808080; border-radius:5px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.6);
}
.pb_win_sel {
border:solid 1px #000080; background:#f8f8f8;
box-shadow:3px 5px 20px rgba(0, 0, 0, 0.6);
}
/* Заголовок обычного и активного окон. */
.pb_win_head, .pb_win_head_sel {
position:absolute; cursor:pointer; padding:0;
top:0; left:0; right:0; height:30px; color:#808080;
font:normal 15px tahoma; text-align:left;
border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
.pb_win_head_sel { color:#000000; }
/* Блок текста в заголовке окна. */
.pb_win_head_text {
position:absolute; font:inherit; color:inherit;
top:6px; bottom:0; left:5px; right:60px;
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
/* Блоки управления в заголовке окна. */
.pb_win_head_del, .pb_win_head_hide {
position:relative; float:right; width:30px; height:30px;
}
.pb_win_head_del { background-position: -30px -76px; }
.pb_win_head_hide { background-position: -2px -76px; }
/*
Классы для блоков HTML-содержимого обычного и активного окна.
Справочники-гриды, фреймы с ютуба, меню, подсказки - фантазия неограничена.
*/
.pb_win_body, .pb_win_body_sel {
position:absolute; padding:10px; color:#000000;
top:31px; left:0; bottom:0; right:0;
font:normal 14px tahoma; text-align:left;
}
/* Блок управления размерами окна. */
.pb_win_resize {
position:absolute; cursor:se-resize;
bottom:0; right:0; width:0; height:0;
border-left:solid 20px transparent; border-bottom:solid 20px #808080;
}
CSS для оконной системы. Классы для модального окна сообщения.
См. так же - Визуальный пример окна сообщения (по кнопке "Показать сообщение").
/*
Классы для модального окна сообщения (окно с дескриптором 1).
Отличается только наименованием классов, структура аналогичная остальным окнам.
Окно сообщения использует оконный класс .pb_win_head_del - для кнопки закрытия окна.
*/
.pb_alert {
position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
padding:0; margin:0; background:#f8f8f8;
border:solid 1px #808080; border-radius:5px;
box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6); }
/* Заголовок модального окна сообщения. */
.pb_alert_head {
position:absolute; cursor:pointer;
top:0; left:0; right:0; height:30px;
border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
/* Блок текста в заголовке окна сообщения. */
.pb_alert_head_text {
position:absolute; color:inherit; overflow:hidden;
top:6px; bottom:0; left:5px; right:30px;
font:normal 15px tahoma; white-space:nowrap; text-overflow:ellipsis;
}
/*
Пользовательские классы для содержимого залоговка .pb_win_head_text
Классы .pb_ahr, .pb_ahb, .pb_ah0 пприрведены для примера пользовательских классов,
они используются в HTML-коде заголовка окна (различные пользовательские иконки и т.д.).
*/
.pb_alert_head .pb_ahr { font:inherit; color:#800000; }
.pb_alert_head .pb_ahb { font:inherit; color:#000080; }
.pb_alert_head .pb_ah0 { font:inherit; color:#000000; }
/*
HTML-содержимое окна сообщения.
Сюда помещается произвольный HTML-код.
*/
.pb_alert_body {
position:absolute; padding:10px;
top:31px; left:0; bottom:0; right:0;
font:normal 15px tahoma; text-align:center; color:#000000;
}
CSS - классы для модального диалогового окна.
См. так же - Визуальный пример диалогового окна (по кнопке "Показать диалог").
/* Классы для модального диалогового окна. */
.pb_dialog {
position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
width:300px; height:300px; background:#eeeeee;
border:solid 1px #808080; border-radius:5px;
box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6);
}
/* Заголовок диалогового окна. */
.pb_dialog_head {
position:absolute; cursor:pointer;
top:0; left:0; right:0; height:30px;
border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
/* Блок текста в заголовке диалогового окна. */
.pb_dialog_head_text {
position:absolute; cursor:pointer;
top:6px; bottom:0; left:5px; right:30px;
font:normal 15px tahoma; white-space:nowrap; text-overflow:ellipsis;
color:#000000; overflow:hidden;
}
/* Блок закрытия диалогового окна. */
.pb_dialog_head_del {
position:absolute; background-position:-30px -76px;
top:0; right:0; width:30px; height:30px;
}
/*
Произвольное HTML-содержимое диалогового окна - фантазия неограничена.
Сюда помещаются диалоги, гриды, формы обратной связи и т.д.
*/
.pb_dialog_body {
position:absolute; padding:10px;
top:31px; left:0; bottom:0; right:0;
font:normal 15px tahoma; text-align:left; color:#000000;
}
CSS для Grid - табличный вывод данных. Последовательность описания классов и стилей может быть важна!
Для каждого Грида создаётся дополнительный персональный тег <style> - тема Грида, которую можно менять. В теме добавляются произвольные вложенные CSS-классы для содержимого ячеек, а так же уточняются указанные ниже стили для колонок и заголовков каждого Грида.
См. подробнее - Работа с Grid
/* Классы Grid - табличный вывод данных. */
.pb_grid {
position:absolute; margin:0; padding:0;
left:0; top:0; bottom:0; right:0;
border:none; overflow:auto;
}
/* Внутренний абсолютный DIV-блок, занимает весь заданный объём. */
.pb_g {
position:absolute; padding:0;
left:0; top:0; min-width:100%; min-height:100%;
border:none; overflow:hidden;
}
/* Внутренний DIV-блок, скроллится в родительском. */
.pb_g_b {
position:relative; margin:0; padding:0;
min-height:20px; border:none; overflow:hidden;
}
/* Внутренний DIV-блок - заголовок Грида. */
.pb_g_h {
position:absolute; margin:0; padding:0;
left:0; top:0; height:30px;
font:bold 13px arial; text-align:center;
border:none; background:#e0e0e0; overflow:hidden;
}
.pb_g_h:hover { border:none; background:#d0d0d0; }
/* Внутренние таблицы для заголовка и содержимого Грида. */
.pb_gt, .pb_gt th, .pb_gt td {
border:dotted 1px #808080; border-collapse:collapse;
border-spacing:0; padding:0;
}
/* Активная и остальные строки <TR> таблицы содержимого Грида. */
.pb_g_bi,.pb_g_bs {
min-height:20px; font:normal 13px arial; text-align:left;
}
.pb_g_bi { background:#eeeeee; } .pb_g_bi:hover { background:#d8d8d8; }
.pb_g_bs { background:#d0d0d0; } .pb_g_bs:hover { background:#d0d0d0; }
/* Активная ячейка <TD> таблицы содержимого Грида. */
.pb_gt .pb_g_cs { border:solid 1px #000000; }
.pb_g_h .pb_gt td:hover { background:#c8c8c8; }
.pb_g_b .pb_gt td:hover { background:#c8c8c8; }
.pb_g_h *, .pb_g_bi *, .pb_g_bs * { font:inherit; text-align:inherit; }