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

/*  задаем тексту в  параметры */
p {

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

}

.rule {

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

}

LI  {

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

}

.zag_b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 6pt;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}

.new {

    color: #0000FF;
    font-size:14px;
    font-family:Verdana,Tahoma; 

}

.new_a {

    color: #0000CC;
    font-family:Verdana,Tahoma; 

}

.new_b {

    color: #FF0000;
    font-family:Verdana,Tahoma; 

}

/*калсс для таблицы с ценами*/

.pc {
background-color:#0000CC;
}

.new_c {

    color: #FFFFFF;
    font-family:Verdana,Tahoma; 

}

.izo {
margin:5px;
}

/*текстовое художественное оформление ссылок*/
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;
}

/* закругление углов*/
.inner-box {
	padding:1em; 
}
 
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
	display: block;
	height: 1px;
	overflow: hidden;
	font-size:1px;
}
 
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
 
/*
 
возможные комбинации
 
r3 r1 r1 вверху
r1 r1 r3 внизу
 
r5 r3 r2 r1 r1 вверху
r1 r1 r2 r3 r5 внизу
 
r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 вверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 внизу
 
однако не стоит ограничивать полет фантазии только этими вариантами, возможны и другие комбинации и не только скругление углов, но и множество других эффектов.
 
*/
 
#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }
 
.inner-box, b { background-color: #cccccc; }
 
 
/* уменьшаем отступы по мере роста радиуса закругления */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}

/*Запомните, если имеете дело с таблицами, которые могут содержимым растягиваться шире заданного размера, то установите для таблицы, тэга TABLE стиль table-layout: fixed; и проблема будет решена*/
TABLE {
table-layout: fixed;
}

TABLE.ps1 SPAN {
	COLOR: #000000
}

/*верхнее меню*/
#navigation1 	{
border-bottom-style: solid;
border-bottom-width:1px;
border-bottom-color:#0000CC;
}
#navigation ul 	{
margin:0; 
padding:0;
text-align:center;
}
#navigation li 	{
margin:0; 
padding:0;
font-size:10px;
list-style:none; 
display:inline;
}
#navigation a	{
color:#0000cc;
text-decoration:none; 
}
#navigation a:hover	{
color:#000000; 
}
/*Меню подвала*/
#copyright	{
float:right; 
}
#copyright ul 		{margin:15px; padding:0; }
#copyright li 		{margin:15px; padding:0; list-style:none; display:inline; }

#footer ul 		{margin:15px; padding:0; }
#footer li 		{margin:15px; padding:0; list-style:none; display:inline; }
#footer a		{color:#000000; font-weight:bold; padding:0 5px 0 0; text-decoration:underline; }
#footer a:hover	{color:#000000; text-decoration:none; }
 
/*Вертикальное меню*/

#menu8  {
	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;
	}

 /*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;
}

/*Простая галерея*/
div.box   		{border:1px solid #000000;font-size:14px;text-align:center;float:left;margin:10px}
div.box:hover   	{border:1px solid #ff0000;}
div.box img
 
/*Модальное окно*/
#fade { /*--Прозрачный слой фона--*/
	display: none; /*--по умолчанию скрыты--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--по умолчанию скрыты--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--CSS3 Тени для Блока--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 Закругленные углы--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Фиксированное позиционирование для тупого IE6--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

table.table_data {
background-color:#CCCCCC;
border:1px solid #0000CC;
}


table.table_data .table_heading td {
border-color:#0000CC;
border-style:solid;
border-width:1px 1px 2px;

}

table.table_data td {
background-color:#CCCCCC;
border-color:#0000CC;
border-style:solid;
border-width:1px 1px 0 0;
color:#111111;
padding:2px;
text-align:center;
}