@charset "utf-8";
/* CSS Document */

#nav{
	position:relative;
	z-index: 3;	
float:left;
width:100%;
list-style:none;
	font-size: 14px;
font-weight:bold;
margin-bottom:1px;
	margin: auto;

}
#nav li{
	position:relative;
	z-index: 3;
float:left;
margin-right:1px;
position:relative;
display:block;
	
}
#nav li a{
	position: relative;
z-index: 3;
display:block;
padding:14px;
color:#fff;
background:#78ba30;
text-decoration:none;
font-family: tahoma;

text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */


}
#nav li a:hover{
	position:relative;
color:#fff;
background: #78ba30;
background:rgba(30,82,47,0.75); /* Выглядит полупрозрачным */
text-decoration:none;
z-index: 3;	
}
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	position:relative;
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
	z-index: 3;
}
#nav ul li{
	position:relative;
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
background:url(dot.gif);
	z-index: 3;
}
#nav ul a{
	position:relative;
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
	z-index: 3;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
	z-index: 3;
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background: #78ba30;
	opacity:1;
    background:rgba(30,82,47,0.75); /* Выглядит полупрозрачным */
    text-decoration:none;
	z-index: 3;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
	z-index: 3;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#78ba30;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:none;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
	z-index: 3;
}

#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
	z-index: 3;
}





#nav ul li{

    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */

    float:none;

    background:url(dot.gif);
z-index: 3;
}

#nav ul a{

    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */

    display:block;
z-index: 3;
	
}

#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */

    left:0; /* Приносим его обратно на экран, когда нужно */

    opacity:1; /* Делаем непрозрачным */
z-index: 3;
}





#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
   background:linear-gradient(to bottom,#78ba30,#bed354); 
   background:rgba (30,82,47,0.75); /* Выглядит полупрозрачным */
   text-decoration:none;
z-index: 3;
}



#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */

    text-decoration:none;

    -webkit-transition:-webkit-transform 0.075s linear;
z-index: 3;
}



#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */

    background:#78ba30;

    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */

    text-decoration:none;

    -moz-transform:scale(1.05);

    -webkit-transform:scale(1.05);
z-index: 3;
}