* /* обнуляем отступы */
{
	margin: 0;
	padding: 0;
}

body {
	background-image: url(img/background.jpg);
	background-repeat: repeat;	
	bgcolor: #6CF; 
	background-attachment: fixed;
}

#header
	{
		width: 1000px;
		height: 200px;
		margin: 10px auto;
		background: url('img/logo.jpg') no-repeat;
        background-size: 100% 100%;
		border: 2px solid #6CF;
		border-radius: 10px;
		box-shadow: 0 0 10px #444;
		box-sizing: border-box;
	}

#main
{

	width: 1000px;
	height: 700px;
	margin: auto;
	box-sizing: border-box;

}

#menu
{
	text-align: center;
	font-size:18px;
	font-family:"Times New Roman", Times, serif;
	width: 205px;
	height: 100%;
	border: 2px solid #6cf;
	border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 0 0 10px #444;
	background: #DCDCDC;
	
	text-indent: 5px; /* Отступ первой строки в пикселах */
	float: left;

	box-sizing: border-box;
	overflow: auto;
}

#content
{

	font-size:16px;
	font-family:"Times New Roman", Times, serif;
	width: 780px;
	height: 100%;
	border: 2px solid #6cf;
	border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 0 0 10px #444;
	background: #DCDCDC;

	float: right;
	display: inline;
	box-sizing: border-box;
	padding: 20px;
	text-indent: 20px;
	text-decoration: none;
}
#content a
{
text-decoration: none;
}

#diagram img { width:380px; transition:width 0.5s ease; }
#diagram:hover img { width:600px; }

.ima{

width: 210px;

margin-left: 20px ;
float: left;
text-align:center;
text-indent: 0px;

}

.ima a{
     display: block; /* Ссылка как блочный элемент */
     text-align: center; /* Выравнивание по центру */
     height: 100%; /* Высота на весь слой */
	  text-decoration: none; /* Отменяем подчеркивание у ссылки */
	  font-size: 20px;
}

/*.ima img{


  border: 2px solid #6CF;
		border-radius: 10px;
		box-shadow: 0 0 10px #444; 
}

*/
h1{
	font-size:18px;
	}

#cat{

	width: 360px;
	float: left;
	text-align:center;
	text-indent: 0px;

}

#txt{
	width: 360px;
	float: right;
	line-height:22px;
	text-indent: 0px;
}
	
#footer
	{

		height: 30px;
		width: 1000px;
		background: #36F;
		border: 2px solid #6CF;
		border-radius: 10px;
		box-shadow: 0 0 10px #444;
		font-size:14px;
		color: #ffffff;	 
		margin: 10px auto;
	box-sizing: border-box;
	}
#footer pre
	{
	margin-top: 5px;
	text-align: center;
	font-family:"Times New Roman", Times, serif;
	}

#navbar {
	position:relative; 
	top: 157px;
	left: 30px;
	width:950px;
	height:20px;
	}

#navbar li {
	
	display: inline;
	font-size:16px;
	font-family:"Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	color: #FFFFff;

	text-shadow: 2px 2px 1px black, 1px -1px black, -1px 1px black, -1px -1px black;
}

#navbar a {
	width: 140px;
	display: block;
	float: left;
	height: 20px;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	transition: 0.6s linear;
}
#navbar a:hover {
	color: #c0c0c0;
}




#buttons{
	text-align:center;
	height: 30px;
	width: 1000px;
	margin: auto;

}

#buttons a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	display: block;
	float: left;
	height: 20px;
	text-decoration: none;
	color: #00ffff;
	padding-top: 20px;
	padding-left: 0px;
	text-align: center;
}

#nav {
      margin:0 auto; /* выравниваем по центру */
		text-align: left;
      }
#nav, #nav ul {
               list-style:none; /* убираем маркер списка */
               padding:0; /* обнуляем внутренние отступы */
               width:200px; /* задаем ширину */
               }
#nav ul {
         position:relative; /* относительное позиционирование (для работы z-index) */
         z-index:-1; /* используем отрицательное значение чтобы подменю не отображались поверх основных пунктов*/
        }
#nav li {
         position:relative; /* относительное позиционирование (для работы z-index) */
         z-index:100; /* располагаем выше элементы списка (подменю) */
        }
		
/* раскрытые пункты подменю плавно сворачиваются */		
#nav ul li {
            margin-top:-23px; /* устанавливаем отрицательный отступ от верхнего края для скрытия подменю */
            -moz-transition:  0.3s linear 0.3s; /* для Firefox 4 */
            -ms-transition: 0.3s linear 0.3s; /* для IE */
            -o-transition: 0.3s linear 0.3s; /* для Опера */
            -webkit-transition: 0.3s linear 0.3s; /* для Chrome и Safari */
            transition: 0.3s linear 0.3s; /* указываем параметры анимированного перехода */
            }
#nav li a {
           background-color:#CCC; /* цвет фона для нашего меню  */
           color:#000; /* цвет шрифта  */
           display:block; /* отображаем как блок */
           font-size:18px; /* размер шрифта */
           font-weight:bold; /* делаем шрифт жирным */
           line-height:28px; /* межстрочный интервал */
           outline:0; /* убираем внешней границы */
           padding-left:10px; /* назначаем левый отступ */
           text-decoration:none; /* убираем подчеркивание у ссылок меню */
          }
		  
/* стрелочка вниз */
#nav li a.sub {
               background:#DCDCDC url("img/down.gif") no-repeat;
               }

/* оформление пунктов меню (стрелочка вверх при раскрытии) */			   
#nav li a + img {
                 cursor:pointer; /* вид курсора */
                 display:none; /* скрывает отображение (устраняет накладку) */
				 width:200px; /* ширина */
                 height:28px; /* высота */
                 left:0; /* положение от левого края */
                 position:absolute; /* позиционируем */
                 top:0; /* положение от верха */
                }
				

			  
/* параметры основных пунктов меню */				  
#nav li a:hover {
                 background-color:#DCDCDC; /* цвет фона */
                }
				
/* параметры для подменю */				
#nav ul li a {
              background-color:#DCDCDC; /* цвет фона */
              border-bottom:1px solid #ccc; /* линия толщиной в 1px серого цвета внизу подменю */
              color:#000; /* шрифт (белый) */
              font-size:12px; /* размер шрифта */
              line-height:22px; /* задаем межстрочный интервал */
              }
			  
/* параметры при наведении указателя на пункты (ссылки) подменю */		
#nav ul li a:hover {
                    background-color:#ddd; /* цвет фона */
                    color: #36F; /* цвет ссылок при наведении курсора */
                   }

				  
/* при клике мышкой на раскрывающееся меню */
#nav a.sub:focus {
                  background:#bcbdc1; /* фон, который закрывает стрелочку "вниз" */
                  outline:0; /* убираем внешней границы */
                  }
				  
/* делаем раскрытие пунктов меню более плавным */
/* посмотрите как будет раскрываться список подменю, изменив время к примеру с 0.4s до 33.4s */
#nav a:focus ~ ul li {
                      margin-top:0;
                     -moz-transition:  0.3s linear; /* для Firefox 4 */
                     -ms-transition: 0.3s linear; /* для IE */
                     -o-transition: 0.3s linears; /* для Опера */
                     -webkit-transition: 0.3s linears; /* для Chrome и Safari */
                     transition: 0.3s linear; /* указываем параметры анимированного перехода */
                     }
					 
/* для показа стрелочки "вверх" после клика */
#nav a:focus + img, #nav a:active + img {
                                         display:block; /* показываем как блочные элементы */
                                         }