.first  

{
list-style: none;
padding: 0;
}

.first ul /* свойства для всех списков внутри класса menu */
{
 width:150px; /* ширина 150 */
 margin-top: 50px;  /* расстояние всего списка сверху */
 }
 
.first ul li a {
	display:block;              /* делаем всю строку ссылкой */
	
	text-decoration: none; 	/*убираем подчеркивание */
padding: 10px 30px;
background: linear-gradient(to left, #AFEEEE 0%, white, #AFEEEE); /*фон градиент */
border-bottom: 1px solid grey;
color:#000033;                 /* цвет текста */
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 35px;
}
.first li:last-child {border-bottom: none;}

.first ul li a:hover  /* a:hover это при навидении мышкой */
{
	display:block;              /* делаем всю строку ссылкой */
	
	text-decoration: none; 	/*убираем подчеркивание */
padding: 10px 30px;
background: linear-gradient(to left, #D8BFD8 0%, white, #D8BFD8); /*фон градиент */
border-bottom: 1px solid grey;
color:#008000;                 /* цвет текста */
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 35px;
}


.telefon
{ 
	float:left; /* привязка влево */
	height: 200px; /* высота */
}
.telefon ul /* свойства для всех списков внутри класса menu */
{
 width:110px; /* ширина 130 */
}
.telefon ul li /* свойство каждой строки внутри списка, которая внутри класса меню */
{
	text-decoration: none; 	/*убираем подчеркивание */
	list-style: none; 		/* убираем жирные точки со списка */
	height: 30px; 		/* высота строки */
	margin-left: -5px; 	/* смещаем список влево, т.к. убранные точки все еще занимают место */
}

.telefon ul li a  /* наводим красоту для  ссылок. для тех пунктов меню в которых мы находимся */
{	
	display:block;              /* делаем всю строку ссылкой */
	padding-left: 20px;           /* отступы текста от левого края */
	text-decoration: none;      /* убираем подчеркивание у ссылок */
	border:1px #000033 solid;      /* окантовочка вокруг ссылки */
	-moz-border-radius: 10px;   /*  Делаем ссылки закругленные. эт для мозилы. в ie не работает */
	border-radius: 10px;        /* Делаем ссылки закругленные. Opera с  Google Chrome и так понимают */
							 /* Это уже CSS3 фишки */
	height: 20px;               /* высота строк */
	margin: 5px;                /* отступ между строками */
	background: #CCCCCC;           /* фон строки для активной ссылки */
	color:#000033;                 /* цвет текста */
}
.telefon ul li a:hover  /* a:hover это при навидении мышкой */
{	
	display:block;              /* делаем всю строку ссылкой */
	padding: 2px 6px;           /* отступы тектса внутри строки */
	text-decoration: none;      /* убираем подчеркивание у ссылок */
	border:1px #000033 solid;      /* окантовочка вокруг ссылки */
	-moz-border-radius: 10px;   /* Делаем ссылки закругленные. эт для мозилы. в ie не работает */
	border-radius: 10px;        /* Делаем ссылки закругленные. Opera с  Google Chrome и так понимают */
							 /* Это уже CSS3 фишки */
	height: 20px;               /* высота строк */
	margin: 5px;                /* отступ между строками */
	background: #000033;           /* фон строки */
	color:#CCCCCC;                 /* цвет текста */
}