/*2. Отступ первой строки <p> */ 
p {
text-indent: 50px;
}

/*3. Выравнивание текста [text-align]    50 это отступ первой строки в тексте*/ 

p {
text-align: justify;
text-indent: 50px  
}

/* 4. В примере кода непосещённые ссылки #663366 - индиго.  */ 
a:link, span.MsoHyperlink
	{color:#3366FF;
	font-style:italic;
	text-decoration:underline;}


/*5. Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - #660099 фиолетовые.

*/ 
  
  
a:visited {
color: #660099;
}


/*6. Псевдокласс :active используется для активных ссылок. 

В примере активные ссылки (которые нажаты и открыты) имеют сиреневый фон #EEAEEE.

*/ 
 
 a:active {
background-color: #EEAEEE;
}


/*7. Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.

Это можно использовать для создания интересных эффектов. При включенном 8. не работает. Например, если мы хотим, чтобы ссылки становились 006666 темно-зеленый и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
*/ 
a:hover {
color: #006666;

}

h2{

padding: 2px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

 h4{

padding: 2px;
margin-top: 15px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 5px;
}

h3{

padding: 1px;
margin-top: 15px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 5px;
}

h5{

padding: 2px;
margin-top: 15px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 5px;
}		
text{
word-wrap: break-word;
}
		
/* Это будет означать, что все элементы H1 (заголовки) в документе будут выравниваться по центру (text-align: center). Также можно указывать другие элементы HTML.*/ 
H1 {text-align: center} 
H2 {text-align: center} 
H3 {text-align: center} 
H4 {text-align: justify} 
H5{text-align: justify} 

#nav, #nav ul {
  list-style: none; /*Убрали буллеты из нашего списка */
  margin: 0; /*Обнулили отступы padding и margin у элементов меню*/
  padding: 0; /*Обнулили отступы padding и margin у элементов меню*/
  border: 1px solid #fff; /*делает внешнюю границу и цвет в основном и выпад меню*/
  background: #515151; 
  float: left; /*Заставили каждый элемент списка <li>, встать на одну линию при помощи правила float:left*/
  width: 100%; 
}
#nav li {
  float: center; /*располагает, растягивает  надпись главная и подложку по ячейке*/
  position: relative;
  background: #515151;
  back\ground: none; /*Украсили меню границей и задним фоном. Свойство back\ground:none служит для задания прозрачного фона во всех браузерах кроме IE 5.*/
  background:rgba(54,54,54,0.75); /* Устанавливает  первичный цвет меню Выглядит полупрозрачным код цвета только в такой форме*/
	text-decoration:underline;
}


/*Добавим немного оформления нашим ссылкам: Первым правилом мы оформили ссылки (чтобы они больше походили на кнопки):*/
#nav a {
  color: #fff;
  text-decoration: none; /*Убрали подчеркивание*/
  display: block; /*Каждому элементу <a> мы присвоили свойство display:block, что дало нашим ссылкам ширину и высоту*/
  width: 100%; /*в верхней ячейке растянул изменнённый цвет. Задали ширину каждой ссылки 120 пикселей (справедливости ради, надо сказать, что реальная ширина равна 140 (120 + 5 + 5) пикселям, так как в нее включаются и отступы), Задание ширины является необходимостью при использовании свойства float для всех элементов кроме элемента <img>.*/
  padding: 4px 5px; /*отступы в меню -- сверху снизу и справа слева. Поэтому надпись шире подложки.*/
  background: url("dot.png"/*tpa=http://beholder-eye.info/example/dropdown/dot.png*/) repeat-y right;
  
  }


/*Селектор #nav a:hover срабатывает в том случае, когда мы подводим курсор к ссылке, а #nav li:hover — когда подводим его к элементу списка. Второй случай понадобиться нам для того, чтобы в меню оставался «след» наших перемещений (мы это увидим далее).*/
#nav a:hover {
  color: #000;
  background: #ccc;
 }

#nav li a:hover{
	/* color:#CCFFFF;   Изменяет цвет шрифта после наведения */
		background:rgba(238,232,170,0.75); /* Выглядит полупрозрачным код цвета только в такой форме*/
	text-decoration:underline;
	}


#nav li:hover,
#nav li.jshover {
  background: #333;
   padding-top:4px; /* Вводим отступ между li горизонтально, чтобы создать иллюзию разделенных пунктов меню. Сначала сдвигает верхнее меню, а при наведении на нижнее сдвигает и его */
}


/*Мы же не зря назвали это меню «выпадающим»
Мы дописываем к уже существующему правилу:*/
#nav li ul {
  display: none; /*Скрыли подменю 2-го и 3-го уровня, указав display:none*/
  position: absolute; /*служит для абсолютного позиционирования подменю относительно элемента <li> верхнего уровня. Когда мы имеем родительский элемент, позиционированный «относительно» (т. е. имеющий position:relative), все позиционированные абсолютно элементы, содержащиеся в нем, будут позиционироваться относительно родительского элемента, а не относительно всей страницы.*/
  background: url("fone-tr.png"/*tpa=http://beholder-eye.info/example/dropdown/fone-tr.png*/);
  padding: 8px 0;
 width:100%; /* растянуло нижнее выпадающее меню на ширину верхней ячкйки*/

}
#nav li li a {
  width:100%; /* растянуло надпись в выпадающем меню после наведения, которая сверху*/
    
  
 /*Вся магия выпадающего меню заключена в строке display:block для #nav li:hover ul. Именно она заставляет подменю «появиться» при подводе курсора к ссылке, сменяя ранее установленный режим display:none:*/
 
}
#nav li:hover ul,
#nav li.jshover ul {
  display: block;
  text-align: left;  /*В выпадающем меню сместил текст влево. В верхнем меню текст остался по центру.*/
  
}


 /*Ширина нашего подменю равна 138 пикселям из-за того, что мы вычитаем 2 пикселя от границ с каждой стороны: 140 – 1 – 1 = 138 пикселей.

Селектор #nav li:hover li ul оказывает влияние на подменю 3-го уровня. Мы его сдвигаем влево на ширину 133 пикселя (величина чисто эмпирическая), а также немного вверх (чтобы оно оказалось на одном уровне с активной ссылкой). Теперь, при наведении мышки, наше подменю будет выскакивать справа от ссылки.
*/
#nav li:hover li ul,
#nav li.jshover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  left: 133px;
  
  
 /*Это позволяет «прицепить» класс jshover к любому элементу <li>, над которым проходит курсор. Эта функция работает только в Internet Explorer — для других браузеров она просто не нужна.

Теперь, чтобы меню заработало в IE, добавим к четырем уже существующим правилам по дополнительному селектору li.jshover: Прикрепили скрипт*/
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
  display: block;
}

#nav li ul li a{
		 border: solid #FFFFFF 1px;/*#666666 темно-серый.
разделяет по толщине и цвету в выпадающем меню пункты. #FFFFFF - белый*/
          float:none;
          display:block;
		           margin:0;
          margin-right:-1px;
          background:#483D8B/*индиго изменяет цвет фона выпавшего меню до наведения на пункты верхнего меню меню*/
		  
        }
		
	.rotate {
		-webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}