@charset "utf-8";
/*========== минимально обнуляем стили ==========*/
* {padding:0; margin:0;
/* box-sizing:border-box позволит сохранить фиксированную ширину элементов, даже при использовании внутренних отступов и границ */
-webkit-box-sizing:border-box; /*for Safari & Chrome */
-moz-box-sizing:border-box; /*for Firefox */
box-sizing:border-box;
}
img {
-moz-user-select:none; /* Запрет выделения картинки (ссылку вокруг картинки надо бы тоже, но она может перестать кликаться) */
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
/*pointer-events:none;*/ /* Убрать из меню пункта "Сохранить изображение как...", но при этом картинка перестанет реагировать на onClick */
border:0;
}
a:focus {outline:none;} /*delete dotted borders arround pressed hrefs */
a:hover,
a:active {outline:none;}
/*========== если браузер не понимает тэги HTML5 ==========*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block;}
header:before,
header:after {content:""; display:table;} /*clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
header:after {clear:both;}
header {zoom:1;} /*for IE 6/7*/
/*========== устанавливаем общие стили тэгов ==========*/
/*========== основной CSS ==========*/
html {height:100%;}
body {height:100%;}
a {color:#007de3;} /* Меняем цвета ссылок по умолчанию */
a:hover {color:#e05f11;}
#header_box {
position:fixed;
top:0;
left:0;
width:100%;
/* min-height:5%;*/
-webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow:0px 3px 3px rgba(0, 0, 0, 0.3); /* Тень снизу, см http://www.cssmatic.com/box-shadow */
z-index:1000;
background:#eeece0;
padding:0 5px;
}
#header_box:after {content:""; display:block; clear:both;}
#map {height:95%; width:100%; position:absolute; top:5%; left:0; z-index:10;
background:url('/img/loading.gif') no-repeat center center;
}
#map #GMapsID,
#map #YMapsID {height:100%; width:100%; position:absolute; top:0; left:0;}
#wrap {width:100%; position:relative; top:10%; left:0; margin:0; padding:0;
overflow-x:hidden;} /* См JS - при slide блока right появляется горизонтальная прокрутка */
.main_box {
/*top: left: использовать нельзя, тк мы юзаем их в JS при слайдинге! */
position:relative;
max-width:90%;
min-height:100px;
/* max-height:600px; overflow:auto; /* Если надо зафиксировать высоту и делать скроллинг */
margin:0 2% .4% 5%; /* 5% чтобы не закрывались элементы управления на карте; .4% под тень снизу, если ниже ничего нет */
border:1px solid #cdd2d5;
float:left;
z-index:20;
}
.main_box div.row {font-size:14px; text-shadow:0 1px 0 #fff; margin:4px 3px;} /* строка информации в 2 колонки*/
.main_box div.row div.left {float:left; width:105px; color:#5b6a7b;} /* левая колонка строки информации, схлапывается если пуста */
.main_box div.row div.right {float:left; min-width:200px; max-width:80%; color:#353e48;} /* правая колонка строки информации */
.main_box div.row div.right span.about {font-size:small; color:#5b6a7b; margin-left:10px; font-style:italic;} /* <span class='about'> в правой колонке строки информации */
.main_box div.row div.right span.about a {color:#007de3;} /* Ссылки в <span class='about'> в правой колонке строки информации */
.main_box div.row div.right span.about a:hover {text-decoration:none;}
.main_box div.row div.right span.about a:visited {color:#46acff;}
.main_box div.line div.lift {float:left; width:105px; color:#5b6a7b;} /* левая колонка строки информации, схлапывается если пуста */
.main_box div.line div.rght {float:right; min-width:200px; max-width:80%; color:#353e48;} /* правая колонка строки информации */
.main_box div.line div.rght span.about {font-size:small; color:#5b6a7b; margin-left:10px; font-style:italic;} /* <span class='about'> в правой колонке строки информации */
.main_box div.line div.rght span.about a {color:#007de3;} /* Ссылки в <span class='about'> в правой колонке строки информации */
.main_box div.line div.rght span.about a:hover {text-decoration:none;}
.main_box div.line div.rght span.about a:visited {color:#46acff;}
.main_box div.line span.ls {float:left; width:105px; color:#5b6a7b; display:block;} /* левая колонка строки информации, схлапывается если пуста */
.main_box div.line span.rs {float:right; min-width:200px; max-width:80%; color:#353e48; display:block;} /* правая колонка строки информации */
.main_box div.line span.rs span.about {font-size:small; color:#5b6a7b; margin-left:10px; font-style:italic;} /* <span class='about'> в правой колонке строки информации */
.main_box div.line span.rs span.about a {color:#007de3;} /* Ссылки в <span class='about'> в правой колонке строки информации */
.main_box div.line span.rs span.about a:hover {text-decoration:none;}
.main_box div.line span.rs span.about a:visited {color:#46acff;}
.main_box div.line .nds { display:none!important; }
.right_box {
/*top: left: использовать нельзя, тк мы юзаем их в JS при слайдинге! */
position:relative;
/*max-width:100%;*/
max-width:240px; min-height:600px; /* под максимальный размер рекламы */
/* max-width:240px; max-height:600px; /* под минимальный размер рекламы */
margin-right:2%;
margin:0 2% .4% 0; /* 2% отступ справа; .4% под тень снизу, если ниже ничего нет */
border:1px solid #cdd2d5;
float:right;
z-index:20;
}
.right_box div { margin-top:19px; } /*move adv down at close btn height */
.description_box {
/*top:; left:; использовать нельзя, тк мы юзаем их в JS при слайдинге! */
position:relative;
max-width:100%;
min-height:50px;
margin:1% 2% .4% 5%; /* 5% чтобы не закрывались элементы управления на карте; .4% под тень снизу, если ниже ничего нет */
border:1px solid #cdd2d5;
z-index:20;
}
.description_box p {text-indent: 20px; margin:8px 0;}
.description_box p:first-letter {text-transform:uppercase;} /* С заглавной буквы */
.shadow {
box-shadow:4px 4px 5px rgba(0,0,0,0.6); /* Тень */
padding:10px; /* Поля вокруг текста */
-webkit-border-radius:5px;
border-radius:5px; /* Радиус скругления */
background:#fff; /* Цвет фона */
}
.clr,
.clear {
clear:both;
float:none !important;
display:block;
margin:0 !important;
padding:0 !important;
border:0 !important;
height:0 !important;
width:0 !important;
text-decoration:none;
text-indent:-9999px;
font-size:0;
line-height:0;
}
.slide-left .btn-slide,
.slide-right .btn-slide {
float:right;
overflow:visible;
width:19px;
height:19px;
text-decoration:none;
border:none; /* Remove border in IE */
background:url(/img/close.png) center center no-repeat; /* Close by default */
margin-bottom:4px; /* Отступ до меню аккодеон, на остальное не влияет */
}
.slide-right.restore .btn-slide, /* Общая часть стилей для ссылки-кнопки 'Открыть'(restore) */
.slide-left.restore .btn-slide { /* .slide-left.restore - мультикласс: оба класса присутствуют одновременно */
margin-top:-12px; /* Приподнимаем картинку чуть вверх */
padding:20px 12px; /* Поля вокруг текста(картинки) */
}
.slide-left.restore .btn-slide { /* .slide-left.restore - мультикласс: оба класса присутствуют одновременно */
background:#fff url(/img/restore-right.png) center center no-repeat !important;
margin-right:-30px; /* Выносим картинку правее div */
box-shadow:4px 4px 5px rgba(0,0,0,0.6); /* Тень вправо и вниз */
-webkit-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0; /* Радиус скругления:верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол */
}
.slide-right.restore .btn-slide { /* .slide-right.restore - мультикласс: оба класса присутствуют одновременно */
float:left; /* Remove button to left side */
background:#fff url(/img/restore-left.png) center center no-repeat !important;
margin-left:-30px; /* Выносим картинку левее div */
box-shadow:-4px 4px 5px rgba(0,0,0,0.6); /* Тень влево и вниз */
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px; /* Радиус скругления:верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол */
}
.btn-all {
float:right;
width:28px;
height:28px;
margin:6px 6px 0 0;
text-decoration:none;
border:none; /* Remove border in IE */
background:url(/img/btn_all.png) no-repeat center top;/* top - CloseAll by default */
}
.btn-all.restore {background-position:bottom;} /* Смещаем картинку вниз - OpenAll */
.btn-device {
float:right;
width:28px;
height:28px;
margin:6px 6px 0 0;
text-decoration:none;
border:none; /* Remove border in IE */
background:url(/img/btn_device.png) no-repeat center top;/* top - DeskTop by default */
}
.btn-device.mobile {background-position:bottom;} /* Смещаем картинку вниз -> Mobile */
.btn-map {
float:right;
width:28px;
height:28px;
margin:6px 6px 0 0;
text-decoration:none;
border:none; /* Remove border in IE */
background:url(/img/btn_map.png) no-repeat center top;/* top - Яндекс-карты by default */
}
.btn-map.google {background-position:bottom;} /* Смещаем картинку вниз -> Google-карты */
/* Стили для Showed() в finct_local.php */
.showed {
display:inline-block;
width:15px;
height:13px;
margin:0px 0 0 6px;
background:url(/img/showed.png) no-repeat center top; /* top - hidden by default */
}
.showed.hidden {} /* top - hidden by default */
.showed.predelay{background-position:center -13px;} /* Смещаем картинку вверх на 13 px -> prepare */
.showed.delay {background-position:center -26px;} /* Смещаем картинку вверх на 26 px -> delay */
.showed.js {background-position:center -39px;} /* Смещаем картинку вверх на 39 px -> js */
/* Поисковые формы для схемы проезда и поиска фирм */
form.search {
display:inline-block;
margin-top:6px;
}
.search input[type="text"] {
width:250px; /* Под самое длинное */
/* width:100%; /* Под самое длинное - это съезжает вниз */
border:1px solid #bbb;
float:left; /* Все элементы в <form> - влево, чтобы не прыгали по высоте */
margin-left:4px;
padding:4px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
-moz-box-shadow:0 1px 1px #ddd inset;
-webkit-box-shadow:0 1px 1px #ddd inset;
box-shadow:0 1px 1px #ddd inset;
}
.search input[type="text"]:focus {
outline: 0;
border-color:#aaa;
-moz-box-shadow:0 1px 1px #bbb inset;
-webkit-box-shadow:0 1px 1px #bbb inset;
box-shadow:0 1px 1px #bbb inset;
}
.search input[type="text"]::-webkit-input-placeholder {color:#999; font-weight:normal;}
.search input[type="text"]:-moz-placeholder {color:#999; font-weight:normal;}
.search input[type="text"]:-ms-input-placeholder {color:#999; font-weight:normal;}
.search input[type="image"] {margin:1px 0 0 6px;} /* Клик на картинку передаёт по get координаты клика */
.search input[type="submit"] {display:none;}
.search div {position:relative; float:left;} /* Обёртка, для абсолютного позиционирования значка 'Очистить поле' */
.search div span.icon_clear { /* Значок очистки поля input, см menuKeys() в menus.php */
position:absolute!important; /* Без !important отменяется в форме #search_route(стилями .tabs), но срабатывает в #search */
right:4px;
display:none; /* Меняем на JS при загрузке страницы в зависимости пустое значение или нет */
cursor:pointer;
margin:2px;
font:normal 1.5em "Lucida Console";
color:#666;
}
.search div .icon_clear:hover { color:#fbb913; }
#search_route div span {position:relative; float:left; margin:4px;} /* <span> 'как проехать от:' в форме поиска маршрута */
sup u {font-size:9px; color:#666;} /* Выделение минут во ВремениРаботы/Обеда, см make_sup() funct_local.php */
span.curr_day { /* Выделение ВремениРаботы/Обеда ТекущегоДня, см make_sup() funct_local.php */
background-color:#f4dfd0;
padding:1px;
-webkit-border-radius:2px;
border-radius:2px; /* Радиус скругления */
}
span.addr {font-size:small; color:#70a6af;} /* Выделение адреса в ссылке */
.social {height:16px; width:16px; vertical-align:text-bottom;} /* Стили logo соцсетей, см SocNet() funct_local.php */
.logo {max-height:50px; float:right; margin-left:5px; vertical-align:top;} /* Стил логотипа Фирмы на карточке филиала */
.logo_big{max-height:150px; float:right; margin-left:5px; vertical-align:top;} /* Стил логотипа Фирмы на схеме проезда */
img.metro {vertical-align:middle; margin-right:4px;} /* Логотип метро в карточке фирмы */
a.metro {color:#007de3;} /* Ссылки-названия станций метро */
a.metro:hover {text-decoration:none;}
a.metro:visited {color:#46acff;}
.def_phone {color:#FF9900; text-decoration:underline;}
.who {color:#666600; font-style:italic; margin-left:6px;}
.name2 {color:#777; padding-left:20px;} /*Альтернативное название Фирмы*/
.href_abt {color:#0066ff;} /*Стиль ссылок для href about*/
h1 {font-size:22px; padding:2px 2px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:14px; text-decoration:underline;}
#btn_geo {margin-bottom:-3px; height:25px; cursor:pointer;} /* Кнопка 'моё местоположение' */
.fieldset {
position:relative; /*тк внутри него будем позиционировать .legend */
margin-left:5px; margin-right:5px;
padding:0.7em;
border:1px solid #ffcece;
background-color:#ffeaea;
/* background-color:#e9e9e9; /* - коварный цвет, тк почему-то в Opera 10.10 слова в legend
визуально перечёркиваются. Если сделать legend {display:block} + fieldset {display:inline-block} - они перестают перечёркиватьтся,
но fieldset улетает вниз экрана на 2000 px и более. А .bg_silver {background-color:Seashell} и ничо не перечёркивается :(
Мы исправляем этот глюк Opera путём задания непрозрачного background-color:#f0f0f0 для legend */
margin-bottom:20px;
color:#6f3c3c;
display:inline-block; min-width:200px; /* Под среднюю надпись в lrgrnd, ибо короткий fieldset не растягивается по длинной legend */
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
.fieldset .legend {
position:absolute; top:-8px; left:20px;
font-size:12px; color:#990000; padding:0 4px; font-weight:bold; /*white-space:nowrap - нельзя, ибо короткий fieldset не растягивается по длинной legend */
/*градиентом бэкграунда затираем рамку от .fieldset под .legend */
background:#f0f0f0; /*если linear-gradient не поддерживается*/
background-origin:border-box;
background-clip:border-box; /*фон отображать и под рамкой тоже*/
background:-webkit-linear-gradient(rgba(240,240,240,1), rgba(240,240,240,0));
background: -moz-linear-gradient(rgba(240,240,240,1), rgba(240,240,240,0));
background: -ms-linear-gradient(rgba(240,240,240,1), rgba(240,240,240,0));
background: -o-linear-gradient(rgba(240,240,240,1), rgba(240,240,240,0));
background: linear-gradient(rgba(240,240,240,1), rgba(240,240,240,0));
}
.tabs { /* Базовый контейнер для табов, см makeTABS() в funct_local.php */
/* min-width:320px;*/
width:100%; /* Растягиваться по ширине наружного контейнера */
padding:0px;
margin:0 auto;
margin-right:24px; /* Оставить место под картинку close при узком содержимом в <section> */
white-space:nowrap; /* Не переносить закладки на следующую строку при узком содержимом в <section> */
}
.tabs section { /* Стили для организации блоков с содержанием */
display:none;
padding:0px; padding-bottom:4px;
background:#fff;
border:1px solid #ddd;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
white-space:normal; /* Переносить строки по словам внутри <section> */
}
.tabs label { /* Стили табов */
display:inline-block;
margin:0 0 -1px;
padding:10px 20px;
font-weight:600;
text-align:left;
color:#aaa;
border:1px solid #ddd;
background:#f1f1f1;
-moz-border-radius:3px 3px 0 0; /* Скругление верхних правого и левого углов */
-webkit-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}
.tabs label:before { /* Шрифт-иконки от Font Awesome в формате Unicode */
/* font-family:fontawesome; /*Ибо иконки из http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css; не используем */
font-weight:normal;
margin-right:10px;
}
/* .tabs label[for*="1"]:before {content: "\f19a";} /* Шрифты-иконки из http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css; не используем */
/* .tabs label[for*="2"]:before {content: "\f17a";}
.tabs label[for*="3"]:before {content: "\f13b";}
.tabs label[for*="4"]:before {content: "\f13c";} */
.tabs label:hover {color:#555; cursor:pointer;} /* Стили заголовков табов при onMouseOver */
.tabs label a {color:#aaa; text-decoration:none;} /* Стиль ссылок внутри заголовков табов */
.tabs label a:hover{color:#555; text-decoration:none;}/* Стиль ссылок внутри заголовков табов */
.tabs input[type='radio'] {display:none;} /* Активный элемент для переключения вкладок по атрибуту checked и псевдокласса :checked */
.tabs input[type='radio']:checked + label { /* Стили для активной вкладки */
color:#555;
border:1px solid #ddd;
border-top:1px solid #FF9900; /*#009933*/
border-bottom:1px solid #fff;
background:#fff;
}
/* селекторы:
.tabs input:nth-of-type(1):checked ~ section:nth-of-type(1),
.tabs input:nth-of-type(2):checked ~ section:nth-of-type(2),
.tabs input:nth-of-type(3):checked ~ section:nth-of-type(3),
.tabs input:nth-of-type(4):checked ~ section:nth-of-type(4) позволяют избавиться от id=content_1/content_2/... в тегах */
#tab1:checked ~ #content_1,
#tab2:checked ~ #content_2,
#tab3:checked ~ #content_3,
#tab4:checked ~ #content_4 {display:block;} /* Активация секций <section> по изменению статуса :checked */
@media screen and (max-width: 680px) { /* Медиа запросы для адаптивности */
.tabs label {font-size:0;}
.tabs label:before {margin:0; font-size:18px;}
}
@media screen and (max-width: 400px) {
.tabs label {padding:15px;}
}
table.list { /* Табличные данные в блоке INFO */
border-collapse:collapse;
width:100%;
background-color:#e2eefe;
border:1px solid #b3d2fa;
-moz-border-radius:3px; /* Скругление верхних правого и левого углов */
-webkit-border-radius:3px;
border-radius:3px;
}
table.list td {text-align:left; white-space:normal; vertical-align:top; padding:2px 5px;}
table.list td:hover {background-color:#cee2fd;}
table.list td.caption {background-color:#cee2fd; border-bottom:1px solid #b3d2fa; text-align:center;}
table.list td.w1 {width:100%;} /* 1 колонка */
table.list td.w2 {width:50%;} /* 2 колонки одинаковой ширины */
table.list td.w3 {width:33.33%;} /* 3 колонки одинаковой ширины */
table.list td.w4 {width:25%;} /* 4 колонки одинаковой ширины */
table.list td.w5 {width:20%;} /* 5 колонок одинаковой ширины */
table.list td.w6 {width:16.67%;} /* 6 колонок одинаковой ширины */
table.list td.w7 {width:14.48%;} /* 7 колонок одинаковой ширины */
table.list td.w8 {width:12.5%;} /* 8 колонок одинаковой ширины */
table.list td.w9 {width:11.11%;} /* 9 колонок одинаковой ширины */
table.list td.w10 {width:10%;} /*10 колонок одинаковой ширины */
table.list td.w11 {width:9.1%;} /*11 колонок одинаковой ширины */
table.list td.w12 {width:8.33%;} /*12 колонок одинаковой ширины */
table.list td.w13 {width:7.69%;} /*13 колонок одинаковой ширины */
table.list td.w14 {width:7.14%;} /*14 колонок одинаковой ширины */
table.list td.w15 {width:6.67%;} /*15 колонок одинаковой ширины */
table.list td.w16 {width:6.25%;} /*16 колонок одинаковой ширины */
table.list td.w17 {width:5.88%;} /*17 колонок одинаковой ширины */
table.list td.w18 {width:5.56%;} /*18 колонок одинаковой ширины */
table.list td.w19 {width:5.26%;} /*19 колонок одинаковой ширины */
table.list td.w20 {width:5%;} /*20 колонок одинаковой ширины */
.gallery-item { /* Плавающие блоки разной высоты, с выравниванием в ряду по самому высокому; для НомеровДомов(http://deer.org.ua/2009/08/25/1/) */
min-width:40px;
*min-width:40px;
display:-moz-inline-stack; /* для FF ниже 3 */
display:inline-block;
white-space:nowrap;
margin:0 24px 20px 0;
min-height:20px;
vertical-align:text-top;
padding:5px;
zoom:1; /* обычный layout fix для ИЕ6 */
*display:inline; /* для ИЕ 6, 7 */
color:#4b4c4c;
border:1px solid #bbb;
background-color:#ddd;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.modal-menu .gallery-item { min-width:12em; margin:5px; } /* чтобы плашки НаселённыхПунктов были одинаковой ширины */
.modal-menu { }
.modal-menu h3 { color:#777; margin-top:20px; clear:both; } /* Регион */
.modal-menu ul { /* вложенные UL всех уровней */
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.modal-menu > ul { /* первый вложенный UL */
display:block;
clear:both;
padding-left:10px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.modal-menu > ul > li { /* РайонОбласти/ГО */
color:#555;
border:1px solid #d9d9d9;
background-color:#ebebeb;
margin:5px 15px 10px 0;
padding:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.modal-menu > ul > li.float { min-width:15%; display:inline-block; float:left; }
.modal-menu > ul > li.block { width:100%; float:left; }
.modal-menu > ul > li > ul > li { /* НаселённыйПункт */
display:inline-block; margin-left:10px; padding:5px; white-space:normal; }
.modal-menu > ul > li > ul > li > a { display:inline-block; } /* Ссылка на НаселённыйПункт */
.modal-menu > ul > li > ul > li:target { background-color:#e6fbdd; }/* <li> с id совпавшим с якорем # в url */
.modal-menu > ul > li > ul > li:target > a {
font-weight:bold; text-decoration:none; color:#006633; font-size:large; } /* Ссылка внутри <li> с id совпавшим с якорем # в url */
.modal-menu > ul li.selected { background-color:#e1f9ff; } /* выделенный РайонОбласти/ГО */
.modal-menu > ul li.selected b:after,
.modal-menu > ul li:target b:after { background:url(/img/check.png) no-repeat right top; /* галочка после <b>, вложенного в <li id=#hash в url) */
width:18px; height:14px; /* место под иконку, она 18x14px */
margin-left:2px; /* чуть отодвинем от заголовк а*/
display:inline-block; content:" "; position:relative; } /* без content:" " может глючить */
a#change { font-weight:bold; } /* Ссылка смены Города */
/* листалка по страницам */
#page_nav {padding-top:10px; padding-bottom:20px; clear:left; text-align:center;}
#page_nav ul {display:inline-block; list-style:none;}
#page_nav ul li {float:left;}
#page_nav li span {cursor:default;}
#page_nav li > * {
font-weight:normal;
position:relative;
float:left;
margin-left:-1px;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
display:inline-block;
padding:4px 14px 4px;
margin-bottom:0;
font-size:13px;
line-height:20px;
color:#666;
text-align:center;
vertical-align:middle;
cursor:pointer;
background-color:#cee2fd;
text-decoration:none;
border:1px solid #3b8ac0;
-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
}
#page_nav li.next > * {-moz-border-radius:0px 4px 4px 0px; -webkit-border-radius:0px 4px 4px 0px; border-radius:0px 4px 4px 0px;}
#page_nav li.prev > * {-moz-border-radius:4px 0px 0px 4px; -webkit-border-radius:4px 0px 0px 4px; border-radius:4px 0px 0px 4px;}
#page_nav li.next > *,
#page_nav li.prev > * {background-color:#b3d2fa; color:#666; cursor:default; text-shadow:0 0 0;}
#page_nav li.next:hover > a,
#page_nav li.prev:hover > a {background-color:#e6e6e6; color:#999;}
#page_nav li.current > span {background-color:#639b3a; color:#fff; text-shadow:0 0 0;}
#page_nav li:hover > a {background-color:#e6e6e6; color:#333; text-decoration:none;
background-position:0 -15px;
-webkit-transition:background-position 0.1s linear;
-moz-transition:background-position 0.1s linear;
-ms-transition:background-position 0.1s linear;
-o-transition:background-position 0.1s linear;
transition:background-position 0.1s linear;
}
a.edit { /* ссылка на редактирование */
padding:2px 5px;
margin-right:10px;
margin-top:7px;
background-color:#edf3fe;
border:1px solid #74a8f5;
float:right;
}
table#debug { /* Вывод отладочной информации */
margin:5px auto; /* auto справа/слева - центрировать таблицу по центру экрана */
background-color:#e9e9e9;
border-collapse:collapse;
position:relative; /* z-index работает только на position: absolute/relative/fixed */
z-index:9999; } /* Поверх всех блоков */
table#debug tr.caption td {text-align:center; background-color:#d6d6d6; color:#555;}
table#debug tr.separate td{height:5px; background-color:white; border:0px solid white;}
table#debug td {white-space:nowrap; vertical-align:top; padding:0 3px; border:1px solid silver; font-size:12px; text-align:right;}
table#debug > tbody > tr > td:nth-child(1) {color:#999;} /* 1-я ячейка; el > el2 - строго дочерние элементы того же уровня, поэтому всплыл tbody */
table#debug td:nth-child(2) {text-align:left;} /* 2-я ячейка */
table#debug td span {float:right;} /* в ячейке выравнивать вправо */
table#debug table {border-collapse:collapse; width:100%;} /* вложенная таблица с замерами времени исполнения функций/скриптов */
table#debug table td {text-align:right!important;} /* все ячейки по дефолту; !important для отмены более специфичного table.debug td:nth-child(2) */
table#debug table td {color:#000;} /* Ячейки вложенной таблицы */
table#debug table td:nth-last-child(2) {color:#666;} /* Вложенная таблица, предпоследняя ячейка, last-child нумерует справа налево */
table#debug .code404 {color:red;} /* Выделить 404 Not Found */
table#debug .code200 {color:green;} /* Выделить 200 OK */
/* Кнопка сабмит, не юзается пока */
.form-wrapper #submit {
float:right;
border:1px solid #00748f;
height:42px;
width:100px;
padding:0;
cursor:pointer;
font:bold 15px Arial, Helvetica;
color:#fafafa;
text-transform:uppercase;
background-color:#0483a0;
background-image:-webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image:-webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image:-moz-linear-gradient(top, #31b2c3, #0483a0);
background-image:-ms-linear-gradient(top, #31b2c3, #0483a0);
background-image:-o-linear-gradient(top, #31b2c3, #0483a0);
background-image:linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
text-shadow:0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color:#31b2c3;
background-image:-webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image:-webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image:-moz-linear-gradient(top, #0483a0, #31b2c3);
background-image:-ms-linear-gradient(top, #0483a0, #31b2c3);
background-image:-o-linear-gradient(top, #0483a0, #31b2c3);
background-image:linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline:0;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border:0;
}