/*CSS MetallStyle*/
body, html {
    margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
    padding:0px;
    text-align:center; /*Выравниваем макет по центру в старых версиях браузеров */
}
#container{
    margin:0 auto;  /*выравниваем макет по центру в современных браузерах */
    text-align:left;  /*Отменяем tex-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
    min-width:1024px;  /*задаем минимальную ширину макета в современных браузерах */
    width:expression(   /*задаем минимальную ширину макета в старых версия браузера. Просто замените цифру на свою шиирину :) */
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 1024
?
"1024px"
:
"auto"
)
:
(
document.body.clientWidth < 1024
?
"1024px"
:
"auto"
)
);
}
/*Здесь пишем стили для шапки сайта */
#header{ 
background: #FFFFFF;
}
#header h1 {
	margin: 0; /* Обнуляем отсупы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отсупы для них. */
	padding: 10px 0; /* Задаем поля */
}
/*Здесь пишем стили для левой колонки сайта */
#left {
    background:#FFFFFF;
    width:22%;  /*ширина колонки */
    float:left;  /*обязательное выравнивание по левому краю,с включением обтекания*/
}
/*Здесь пишем стили для правой колонки сайта */
#right {
    min-width:250px;
    width:22%; /*ширина правой колонки */
    background:#FFFFFF;
    float:right; /*обазятельное выравнивание колонки по правому краю с включением обтекания */
}
/*Здесь пишем стили для блока контента */
#content { 
    background:#FFFFFF;
    margin:0px; /*обнуляем отступы сверху и снизу*/
    margin-left:22.5%; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
    margin-right:22.5%; /*Обязательный отступ справа, должен быть немного больше ширины правой колонки */
    padding:10px;
}
#content h1 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:24px;
font-family:Verdana,Tahoma;
text-align:center;
}
#content h2 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:17px;
font-family:Verdana,Tahoma;
color: #0000CC;
text-align:center;
} 
#content h3 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
text-align:center;
}
#content h4 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
text-align:center;
}
#content h5 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
text-align:center;
}
#content p {
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
}
#content a	{
color:#0000cc;
text-decoration: underline; 
}
#content a:hover	{
color: #0000FF;
text-decoration: none; 
}
#bigcontent { 
    background: #FFFFFF; margin:20px;
    margin:0px; /*обнуляем отступы сверху и снизу*/
    margin-left:22.5%; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
    padding:10px;
}
#bigcontent h1 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:24px;
font-family:Verdana,Tahoma;
}
#bigcontent h2 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:17px;
font-family:Verdana,Tahoma;
color: #0000CC;
text-align:center;
} 
#bigcontent h3 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
} 
#bigcontent h4 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
}
#bigcontent h5 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
font-size:16px;
font-family:Verdana,Tahoma;
color: #0000CC;
}
#bigcontent p {
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
}
#bigcontent a	{
color:#0000cc;
text-decoration: underline; 
}
#bigcontent a:hover	{
color: #0000FF;
text-decoration: none; 
}
#gallcontent { 
    background: #FFFFFF; margin:20px;
    margin:0px; /*обнуляем отступы сверху и снизу*/
    margin-left:22.5%; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
    padding:10px;
}
/*атрибут, который опускает подвал сайта ниже всех блоков. Нужен для корректной работы макета. */
#clear {
    height:0;
    font-size:1px;
    line-height:0px;
    clear:both;
}
/*Здесь пишем стили для подвала сайта */
#footer{
    background-color: #999999;
}
#footer p{
    margin:0px;  /* обнуляем отступы*/
    padding: 10px 0; /*  задаем поля */
}
/*Запомните, если имеете дело с таблицами, которые могут содержимым растягиваться шире заданного размера, то установите для таблицы, тэга TABLE стиль table-layout: fixed; и проблема будет решена*/
TABLE {
table-layout: fixed;
}
/*  задаем тексту в  параметры */
p {

    color:#424242;
    font-size:14px;
    font-family:Verdana,Tahoma;
	text-align:justify;

}
#gallery { 
    margin: 0px;
	padding: 0;
	border: 0;
	background: #ffffff url(css/bg.jpg) repeat left top;
	height:900px;
}
object a {
   display: none;
}
object {
   margin-left: auto; 
   margin-right: auto; 
   display block;
} 
/*Горизонтальное меню*/

ul#menu {
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url(../images/OFF.gif) repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
ul#menu li {
	display:block;
	float:left;
	margin:0;
	pading:0;
}
ul#menu li a {
	display:block;
	float:left;
	color: #000000; 
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url(../images/DIVIDER.gif) no-repeat top right;
}
ul#menu li a:hover {
	background:transparent url(../images/HOVER.gif) no-repeat top right;	
}
 /*Вертикальное меню*/
#menu8  {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#menu8 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#menu8 li a:link, #menu8 li a:visited {
	text-decoration: none;
	color: #424242;
	display: block;
	background: url(images/menu8.gif);
	padding: 8px 0 0 1px;
	}
	
#menu8 li a:hover {
	text-decoration: none;	
	color: #0000cc;
	background: url(images/menu8.gif) 0 -32px;
	padding: 8px 0 0 7px;
	}
	
#menu8 li a:active {
	text-decoration: none;
	color: #fff;
	background: url(images/menu8.gif) 0 -64px;
	padding: 8px 0 0 7px;
	}
/*Вертикальное меню*/
#menu_left {
margin: 10px;
}	
#menu_left ul {
list-style: none;
	margin: 0;
	padding: 0;
}

#menu_left li a {
    margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;	
	background:transparent url(../images/OFF6.gif) repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #577187;
	border-top:1px solid #919191;
	color: #000000;
	text-decoration:none;
	font-size:13px;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px
}
	
#menu_left li a:hover {
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	background:transparent url(../images/ON2.gif) repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #f3f7fb;
	border-top:1px solid #919191;
	color: #333333;
	text-decoration:none;
	font-size:13px;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px
}
.rts ul li a {
    margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;	
	background:transparent url(../images/OFF3.gif) repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #9b9d9f;
	border-top:1px solid #919191;
	color: #000000;
	text-decoration:none;
	font-size:14px;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px
}

#top100 {
    background:#FFFFFF;
    padding:5px 10px;
}

#bgborder {
	margin:10px;
    border-style: double; 
	padding: 16px; 
	background-color: #DCDCED;
}

#bgborder_left {
	margin:10px;
    border-style: double; 
	padding: 16px; 
	background-color: #DCDCED;
}
.kart  {
    float:right;
	margin:10px;
    border-style: double; 
	padding: 16px; 
	background-color: #DCDCED;
}
.kart2  {
    float:left;
	margin:10px;
    border-style: double; 
	padding: 16px; 
	background-color: #DCDCED;
}

.nemo {
    visibility:hidden;  
}

#logo {
     background: url(../images/metallstyle.gif);
     background-repeat:no-repeat;
     height:250px;
}
#logo h1{
     text-align: right;
	 word-spacing:24px;
     color: #000099;
     font-size:18px;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     padding-top:40px;
	 padding-right:250px;
}
.fase {
     color: #000033;
     font-size:26px;
     font-family:Verdana, Arial, Helvetica, sans-serif;
	 word-spacing:normal;
}

#clock {
width:180px;
float:right;
margin-top:5px; 
margin-right:10px;
}

.izo {
margin:5px;
}

#metal {
position: absolute;
left: 10px;
top: 50px;
width: 620px;
height: 150px;
}
 /*CSS галерея*/
.gallerycontainer{
position:relative
/*Добавить высоте атрибутов и установить его в крупнейший высота изображения для предотвращения наложения*/
}

.thumbnail img{ 
border-color:#0000CC;
border: 1px;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS для увеличенного изображения*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS для увеличенного изображения*/
border-width: 0;
padding: 2px;
}


.thumbnail:hover span{ /*CSS для увеличенного изображения*/
visibility: visible;
left: 30%; /*положение, когда увеличенное изображение должно горизонтального смещения */
z-index: 50;
}

#articles p {
    color:#000000;
	font-weight:bold;
    font-size:18px;
    font-family:Verdana,Tahoma;
	text-align:center;
}

/*текстовое художественное оформление ссылок*/
a:link {
	text-decoration: none;
	color: #424242;
}
a:visited {
	text-decoration: none;
	color: #424242;
}
a:hover {
	text-decoration: underline;
	color: #0000FF;
}
a:active {
	text-decoration: none;
}
.tab td {
    border-bottom: 1px solid  #CCCCCC; /* Линия снизу */
	text-align:center;
}
.blu {
     color: #0000CC;
}
.staty  {
list-style-type:none;
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:0px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
}
.staty li h3 {
background:#CCCCCC;
border: #0000CC solid 1px;
margin-top: 15px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.staty li p {
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:0px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
line-height:22px;
text-align:justify;
}
.staty li a {
color: #000099;
text-decoration: none;
}
.staty li a:hover {
color: #0000CC;
text-decoration: none;
}
.ramka3 {
     float:left; 
	 margin:10px; 
	 padding:0;
	 border:#CCCCCC solid 5px;
}