/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/

.level1 {
	width: 142px;
	text-align: center;
}

.level2 {
	text-align: left;
}

#nav{
	float:left;
	width:100%;
	list-style:none;
	margin: 0;
	padding: 0;
}
#nav li{
	float:left;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px 15px 7px;
	color:#fff;
	background:#333;
	text-decoration:none;
	font-weight: bold;
}

#nav li.active a{
	color:#fc0;
	background: #444;
}

#nav li a:hover{
	color:#fc0;
	background: #444;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устанавливаем начальное состояние прозрачности */
	margin: 0;
	padding: 0;
}
#nav li ul li{
	 /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
	font-weight: normal;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left:0; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	color:#fc0;
	background: #444;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
		color:#fff;
	background: #333;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	color:#fc0;
	background: #444;
}


/*------------------------------------*\
	НАВИГАЦИЯ В ПОДВАЛЕ
\*------------------------------------*/

.flevel1 {
	width: 195px;
	text-align: left;
	font-weight: bold;
}

.flevel2 {
	text-align: left;
	font-weight: normal;
}

#fnav{
	float:left;
	width:100%;
	list-style:none;
	margin: 0;
	padding: 10px 0 0 22px;
}
#fnav li{
	float:left;
	position:relative;
	display:block;
}
#fnav li a{
	display:block;
	padding:5px 15px;
	color:#000;
	text-decoration:none;
}
#fnav li a:hover{
	color:#333;
	text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#fnav ul{
	list-style:none;
	position:absolute;
	left:0px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:1; /* Устанавливаем начальное состояние прозрачности */
	margin: 0;
	padding: 0;
}
#fnav ul li{
	float:none;
}
#fnav ul li a {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  list-style: outside none circle;
  padding: 5px 15px;
}

#fnav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	text-decoration:underline;
}
#fnav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
}
#fnav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	text-decoration:underline;
}

/*------ Выпадающее меню в прайсе -------*/

/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ .price-table {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: block;
	line-height: 30px;
	font-size: 22px;
	margin-bottom: 20px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + .price-table {
    display: block;   
	/*
	margin-left: 37px;
    padding: 0 10px 60px;
	*/
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #fc0;
    color: #fff;
	content: " ";
    content: "\002B";
    display: block;
    float: left;
    font-size: 16px; 
    font-weight: bold;
    height: 18px;
    width: 18px;
    line-height: 18px;
    margin: 7px 10px 3px 5px;
    text-align: center;
}
.hide:checked + label:before {
    content: "\2212";
}