@charset "utf-8";
body {
font-family: 'Lora', serif;
	font: 100%;
	background: #42413C url(../img/bg.png) repeat;
	margin: 0;
	padding: 0;
	color: #000;
}


/* ~~ Селекторы элементов/тегов ~~ */
ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
	padding: 0;
	margin: 0 0 10px 0;
}

h2 {color: #282828; font-family: Verdana, Arial, Helvetica, sans-serif;} 
.bez {text-decoration: none!important;}
h3 {color:#999;}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
	padding-right: 15px;
	padding-left: 15px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
}
a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
	border: none;
}
/* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */
	text-decoration: none;
}

/* ~~ этот контейнер фиксированной ширины окружает все остальные DIV ~~ */
.container {
	
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.2);

	width: 960px;
	background-color: #FFF;
	margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */
}
#close {position: absolute; top: 0; right: 0; height: 30px; width: 30px; background: url(../img/close.png); cursor: pointer; margin: 10px;}
#close:hover {opacity: 0.7;} 
.probel {height: 157px; background: url(../img/razd.jpg);}
.prod_img {float: left; width: 200px; height:297px; margin: 0 28px 15px 33px;}
.discript {	border-bottom: 5px solid #0099cc; position:absolute; left: 320px; bottom: 13px; margin-right: 20px;}
.discript h1 {font-size:20px; color:#282828; padding:0; text-align:center; margin: 0 0 10px 0;}
.tel {position:absolute; top: 12px; right: 20px; width: 260px; background: #0099cc;}
.tel:hover {position:absolute; top: 12px; right: 20px; width: 260px; background: #999;}
.nav_b { }
.nav {position: relative; float:left; cursor: pointer; margin: 0 20px 15px 15px;}
.nav:hover {opacity: 0.8;}
/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */
.header { top: 0;
	height: 145px;
	padding-top: 12px;	
	position:fixed;
	width: 960px;
	z-index: 10;
	background-color: #fff;
}

/* ~~ Информация по макету. ~~ 

1) Поля размещены только вверху и/или внизу DIV. Элементы в этом DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.

*/	
#showhide {position: fixed; width: 960px; height: 100%; background: url(../img/transparent-bg.png) repeat; z-index: 11;}
.content {
	position:relative;
	padding: 10px 0;
}

/* ~~ Нижний колонтитул ~~ */
.footer { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px; color:#999;
	padding: 20px 0 10px 0;
	background-color: #f2f2f2;
}

.email {color: #282828;}


/* ~~ прочие классы float/clear ~~ */
.fltrt {  /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
hr {margin: 100px 0 20px 0;}
/* ----- COLOR STRIPES TABLE ----- */

table.style-colorstripes p { margin-top: 1em;}
table.style-colorstripes tbody tr,
table.style-colorstripes tbody td {
    border: 5px solid #f2f2f2;
}
table.style-colorstripes tbody tr {
	background-color: #fff;
}

table.style-colorstripes tbody tr:hover th,
table.style-colorstripes tbody tr:hover td {
	background-color: #0099cc;
	color: #fff;
}


.sectiontableheader {
}
table.style-colorstripes {
	margin: 0 0 0 30px;
	color: #282828;
	border-collapse: collapse!important;
}