/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №9 Создание меню с пояснениями.
style.css - Набор стилей для урока
=============================================================
*/

ul#menu {
  margin: 5px; /* Отступ для кнопок */
  list-style-type : none;
  font-size: 13px; /* Размер шрифта в кнопках */
}

ul#menu li {
  margin-bottom: 5px; /* Отступ между кнопками */
  position: relative;
  display: inline;
  float: left;
}

ul#menu a {
  position: relative;
  width: 150px; /* Ширина кнопки */
  height: 2.5em; /* Высота кнопки */
  display: block; /* Отображение кнопок (НЕ МЕНЯТЬ) */
  padding: 5px; /* Отступ для текста в кнопках */
  padding-right: 0; /* Правый отступ для кнопок */
  border: 1px solid #002948; /* Задание границы кнопки */
  background-color: #c4e5ff; /* Задание фона кнопки */
  color: #000; /* Цвет шрифта в кнопках */
  text-decoration: none; /* Отмена подчёркивания ссылок */
  font-weight: bold; /* Полужирный шрифт */
  cursor: pointer; /* Задание типа курсора */
}

ul#menu a span {
  position: absolute; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  top: -10000px; /* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  left: -10000px;/* Задание позиции подсказок (НЕ МЕНЯТЬ) */
  display: block; /* Отображение подсказок (НЕ МЕНЯТЬ) */
  width: 125px; /* Длинна поля подсказок */
  height: 200%; /* Задание высоты поля подсказок */
  background-color: #c4e5ff; /* Задание фона поля подсказок */
  border: 1px solid #002948; /* Задание границы поля подсказок */
  border-top: 0; /* Отключение верхней границы */
  padding: 5px; /* Отступ для текста подсказки */
  padding-left: 25px; /* Отступ для текста подсказки */
  cursor: pointer; /* Задание типа курсора */
  color: #333; /* Цвет шрифта в подсказках */
}

ul#menu a:hover, ul#cmd a:focus, ul#cmd a:active {
  background: #c4e5ff; /* Задание фона подсказки */
}

ul#menu a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  top: 3em; /* Задание поля подсказки (НЕ МЕНЯТЬ) */
  left: -1px;  /* Задание поля подсказки (НЕ МЕНЯТЬ) */
}