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

#nav{
/*	z-index: 999;*/
	float:left;
	width:96%;
	list-style:none;
	font-weight:bold;
	margin:0;
/*border:1px solid red;*/
}
#nav li{
	float:left;
	margin-right:6px;
	position:relative;
	display:block;
}
#nav li b{
	display:block;
	padding:3px 3px 4px 3px;
	color:#000;
	font: bold 12px Verdana;
	text-shadow:1px 1px 1px rgba(255,255,255,0.75);
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a{
	display:block;
	padding:3px 3px 4px 3px;
	color:#fff;
	background:#ccc;
	font: bold 12px Verdana;
	text-decoration:none;
/* Тень текста, чтобы приподнять его немного */
	text-shadow:1px 1px 1px rgba(0,0,0,0.75);
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#aaa;
/* Полупрозрачный */
/*	background:rgba(107,12,54,0.75);*/
	text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
/* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	left:-9999px;
/* Устанавливаем начальное состояние прозрачности */
	opacity:0;
/* В Webkit выпадающие пункты будут проявляться */
	-webkit-transition:0.1s linear opacity;
}
#nav ul li{
/* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	padding-top:1px;
	float:none;
	margin:0;
}
#nav ul b{
/* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	white-space:nowrap;
	display:block;
}
#nav ul a{
/* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	white-space:nowrap;
	display:block;
}
/* Выводим выпадающий пункт при наведении курсора */
#nav li:hover ul{
/* Приносим его обратно на экран, когда нужно */
	left:-40px;
/* Делаем непрозрачным */
	opacity:1;
}
/* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
#nav li:hover b{
	background:#aaa;
/* Выглядит полупрозрачным */
	background:rgba(150,150,150,0.9);
	text-decoration:underline;
}
#nav li:hover a{
	background:#aaa;
/* Выглядит полупрозрачным */
	background:rgba(150,150,150,0.9);
	text-decoration:underline;
}
/* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
#nav li:hover ul li b{
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.01s linear;
}
#nav li:hover ul a{
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.01s linear;
}
/* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
#nav li:hover ul li a:hover{
	background:#ccc;
/* Полупрозрачный */
/*	background:rgba(51,51,51,0.75);*/
	text-decoration:underline;
	-moz-transform:scale(1.01);
	-webkit-transform:scale(1.01);
}