@charset "windows-1251";
/* CSS Document */
* {
margin:0;
padding:0;
}
/* Контейнер для меню */
#nav {
width:100%;
height:50px;
background-color:#FFBF00;
font-family: "SCConvoy"; /* Шрифт, подгружаемый */
font-size: 18px/25px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
}
/* Дизайн меню */
#menu:before, #menu:after {
content: " ";
display: table;
}
#menu:after {
clear: both;
}
#menu {
*zoom: 1;
}
ul#menu {
margin:0 auto; /* Выравнивание по центру */
width:910px; /* Ширина меню */
height:50px; /* Высота меню */
}
#menu li {
display:block; /* Ссылки отображаются в виде блока */
min-width:100px; /* Ширина блока */
background-color: #FFAF00; /* Цвет фона */
color: #000; /* Цвет текста */
float: left; /* Располагаем элементы по горизонтали */
position:relative; /* ??? */
}
#menu a { /* Ссылки основных пунктов меню */
display:block; /* Ссылки отображаются в виде блока */
font-weight:normal; /* Нормальное начертание текста */
font-size:18px/25px; /* Размер шрифта */
color:#000; /* Цвет текста */
text-decoration:none; /* Убираем подчёркивание */
white-space: nowrap; /* запрещаем перевод строк */
text-align:center; /* Центрируем текст */
height:40px; /* Высота пункта */
line-height:35px; /* Межстрочный интервал */
background-color:#FFAF00; /* Цвет фона */
border:1px solid #666; /* Параметры рамки */
border-bottom:none; /* Убираем границу снизу */
padding:5px; /* Поля вокруг текста */
}
#menu a:hover {
background-color:#000; /* Цвет фона при наведении */
color:#FFAF00; /* Цвет текста при наведении */
}
#menu li ul {
display:none; /* Отключаем отображение меню 2-го уровня */
position: absolute; /* абсолютное позиционирование внутренних списков */
}
#menu li ul a {
min-width: 150px; /* минимальная ширина подпунктов */
width: auto !important; /* для поддержки IE6 */
width: 150px; /* для IE6 */
}
#menu li:hover ul, #menu li.ie6 ul {
display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
}
#menu li:hover ul a, #menu li.ie6 ul a {
color: #000; /* цвет текста внутренних ссылок */
background: #FFAF00; /* цвет фона */
}
#menu li:hover a, #menu li ul a:hover, #menu li.ie6 a {
color: #FFAF00; /* цвет текста внешних ссылок при наведении курсора на LI,
а также внутренних ссылок при наведении курсора на них самих */
background: #000; /* фон */
}
a#pull { /* внешние ссылки будут скрыты (для экранов настольных систем) */
display:none;
}
/****************************************************
* Смартфон (портретная и альбомная ориентация) *
****************************************************/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#nav {
margin:0;
min-width:320px;
max-width:480px;
height:50px;
}
ul#menu {
width:100%;
display:none;
height:auto;
}
#menu li {
display:block;
float:none;
width:100%;
}
#menu li a {
border:none;
border-bottom:1px solid #576979;
padding:5px 0; /* Поля вокруг текста (верх-низ / лево-право) */
}
#menu a {
text-align:left;
width:100%;
text-indent:15px;
}
/********** МЕНЮ 2-го уровня **********/
#menu li ul {
display:block;
}
#menu li ul a {
width:100%;
border:none;
border-bottom:1px solid #576979;
padding:5px 0; /* Поля вокруг текста (верх-низ / лево-право) */
}
/********** КОНЕЦ МЕНЮ 2-го уровня **********/
#nav a#pull {
display:block;
width:100%;
height:50px;
background-color:#FFAF00;
font-family: "SCConvoy"; /* Шрифт, подгружаемый */
font-size: 18px/25px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color:#000;
line-height:50px;
position:relative;
text-decoration:none;
text-indent:5px;
}
#nav a#pull:after {
content:"";
background:url(nav-icon.png);
width:20px;
height:20px;
display:inline-block;
position:absolute;
right:15px;
top:15px;
}
}