body, html {
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
padding:0px;
text-align:center; /*Выравниваем макет по центру в старых версиях браузеров */
/*background: url(fon.png);*/ /* Фоновый рисунок */
position: absolute;
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
background: #FFFFFF;
}

#container{
/*margin:0 auto;*/  /*выравниваем макет по центру в современных браузерах */
margin:15px;
text-align:left;  /*Отменяем tex-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
min-width:650px;  /*задаем минимальную ширину макета в современных браузерах */
width:expression(   /*задаем минимальную ширину макета в старых версия браузера. Просто замените цифру на свою ширину :) */
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 650
?
"650px"
:
"auto"
)
:
(
document.body.clientWidth < 650
?
"650px"
:
"auto"
)
);
margin:25px;

background: #81B72B;
   box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

/* Градиент */
/*background: #2C2FED;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2C2FED), to(#33EE46));
background: -webkit-linear-gradient(#2C2FED, #33EE46);
background: -moz-linear-gradient(#2C2FED, #33EE46);
background: -ms-linear-gradient(#2C2FED, #33EE46);
background: -o-linear-gradient(#2C2FED, #33EE46);
background: linear-gradient(#2C2FED, #33EE46);
-pie-background: linear-gradient(#2C2FED, #33EE46);*/

background: #0080FF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0080FF), to(#FFF8E7));
background: -webkit-linear-gradient(#0080FF, #FFF8E7);
background: -moz-linear-gradient(#0080FF, #FFF8E7);
background: -ms-linear-gradient(#0080FF, #FFF8E7);
background: -o-linear-gradient(#0080FF, #FFF8E7);
background: linear-gradient(#0080FF, #FFF8E7);
-pie-background: linear-gradient(#0080FF, #FFF8E7);
}

#layer1 {
    z-index: 1; /* Порядок слоев */
    width: 100%; /* Ширина слоя с фоном */
    height: 100%; /* Высота слоя с фоном */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края окна */
    top: 0; /* Положение от верхнего края */
    background: #62AA2A;
   }

#header {
    position: relative; /* Абсолютное позиционирование */
   
	/*background: #515151;*/
	z-index: 3; /* Порядок слоев */
    }

  #header2 {
    /* Абсолютное позиционирование */
   position: relative;
   

	/*background:#2E8B57 ; */
	z-index: 2; /* Порядок слоев */
	 /*background-image:(img/1.gif);*/
background-image: url(../img/zagolovok_new.jpg);
background-repeat:no-repeat;
background-size: 100% 100%; 
 width: 100%; /* Ширина слоя с фоном */
    height: 200px; /* Высота слоя с фоном */
	
   box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
   }

   #header h1 {
	margin: 0; /* Обнуляем отсупы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отсупы для них. */
	padding: 10px 0; /* Задаем поля */
z-index: 3;
	}
	#header2 h1 {
	position: relative;
	margin: 0; /* Обнуляем отсупы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отсупы для них. */
	padding: 10px 0; /* Задаем поля */
	z-index: 2;
	}

#header2 p {
margin:0px;
color:#FFF8E7;
font-style: italic;
/* font-weight: bold; */
font-size: 30px;
font-family: "Monotype Corsiva";
text-indent:30px;
text-shadow: black 1px 1px 2px, red 0 0 5em; 
/*text-shadow: 1px 0px 0px #000;*/
}

#left{
position: relative;
z-index: 2;
background: #FFF8E7;
width:200px;  /*ширина колонки */
float:left;  /*обязательное выравнивание по левому краю,с включением обтекания*/
padding:5px;

overflow: hidden;

box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/*Здесь пишем стили для правой колонки сайта */
#right{
position: relative;
z-index: 2;
width:140px; /*ширина правой колонки */
background: #FFF8E7;
float:right; /*обазятельное выравнивание колонки по правому краю с включением обтекания */
padding:10px;
text-align:justify;

box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

}

/*Здесь пишем стили для блока контента */
#content{
background: #FFF8E7;
position: relative;
z-index: 2;
margin:0px; /*обнуляем отступы сверху и снизу*/
margin-left:220px; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
margin-right:170px; /*Обязательный отступ справа, должен быть немного больше ширины правой колонки */
padding:10px;
text-align:justify;



box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#content h1 {
color: #1D67B7;
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-family: "Monotype Corsiva";
} 
#content p {

margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
text-indent:30px;
}
#clear{
position: relative;
z-index: 2;
height:0;
font-size:1px;
line-height:0px;
height: 10px;
clear:both;
}
/*Здесь пишем стили для подвала сайта */
#footer{
position: relative;
z-index: 2;
padding: 7px; 
/* background-color:#2E8B57 ;*/

background: url(../img/footer.jpg);
background-repeat:no-repeat;
background-size: 100% 100%; 


box-shadow: 5px 5px 25px #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#footer p {
margin:0px;
color:#FFF8E7;
font-style: italic;
/* font-weight: bold; */
font-size: 22px;
font-family: "Monotype Corsiva";
text-indent:30px;
text-shadow: black 1px 1px 2px, red 0 0 5em;
}
  
#nav, #nav ul {    list-style: none;
    margin: 0;
    padding: 0;    
	/*border: 1px solid #000;*/
    background: #2E8B57 ; /*#515151;*/
    float: left;
    width: 100%; 
text-align:center;		
border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    background: url(../img/menu.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%; 

color:#FFF8E7;
font-style: italic;
font-size: 19px;
font-family: "Monotype Corsiva";
text-shadow: black 1px 1px 2px, red 0 0 5em;
	} 

	#nav li {    
	box-shadow: 5px 5px 25px #000;
	-moz-box-shadow: 5px 5px 25px #000;
	-webkit-box-shadow: 5px 5px 25px #000;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	float: left;
    position: relative;    
	background: #515151;    
	background: none; 
	back\ground: none;
	z-index: 3;	
	}
	#nav li ul {
    display: none;  
	}
	#nav a 
	{
    color: #fff;
    text-decoration: none;
    display: block;
    width: 150px;
    padding: 4px 10px;
	
    /*background: url(gr.png) repeat-y right;*/
	
	}
	#nav a:hover {
	
    color: #000;
    background: #ccc;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	}
	#nav li:hover , #nav li.jshover {
	
    background: #333;
	
	}
	#nav li ul { 
	display: none;
	}
	#nav li ul {
	background: rgba(255,255,255,0.5);
	padding: 10px 5px;
	


	box-shadow: 5px 5px 25px #000;
	-moz-box-shadow: 5px 5px 25px #000;
	-webkit-box-shadow: 5px 5px 25px #000;
	
	/*border-radius: 0px 15px 15px 15px;
    -moz-border-radius: 0px 15px 15px 15px;
	-webkit-border-radius: 0px 5px 5px 5px;
	*/
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
	display: none;
    position: absolute;
    background:#2E8B57;
    background: url(../img/button.jpg) ; 
   background-repeat:no-repeat;
    background-size: 100% 100%;  
    padding: 8px 0;
    width: 158px;	
	}

	#nav li li a {
    width: 138px;
    background: none;

color:#FFF8E7;
font-style: italic;
font-size: 18px;
font-family: "Monotype Corsiva";
text-shadow: black 1px 1px 2px, red 0 0 5em;
	}

	#nav li:hover ul , #nav li.jshover ul{
	
    display: block;

	}
	#nav li:hover li ul, #nav li.jshover li ul  {
    display: none;
    width: 158px;
    top: -9px;
    left: 143px;
	

	}
	#nav li:hover li:hover ul , #nav li.jshover li.jshover ul{
    display: block;

	}
	
	
	
	/*рисунок заголовка */

 .normal-img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
 }

 .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 25px 7px 0; /* Отступы вокруг картинки */
   border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	/*padding: 10px;  Задаем поля */
   }
   

 .leftimg_ban {

    margin: 7px 7px 7px 7px; /* Отступы вокруг картинки */
   border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
       height: 101px;
      width:150px;
    vertical-align: middle;
    /* margin:0 auto;*/
    margin-left:-5px;
   }

   .rightimg {
    float:right; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 7px; /* Отступы вокруг картинки */
   border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	/*padding: 10px;  Задаем поля */
   }