body 
{
	font-family: 'Open Sans', sans-serif;
	font-size:  12px; /*xx-small, x-small, small, medium, large, x-large, xx-large*/
	color: #000;
	margin: 0px;
	padding: 0px;
}
textarea
{
	width:100%;
}

table 
{
	font-size:12px;
}
.table_log table, .table_log caption, .table_log th, .table_log td {border:1px solid #333;background:#FAFAFA;font-size:12px;}
.table_log caption {font-size:16px;}
table.table_log {width:100%;}

img
{
	max-width:180px;
	height:auto;
}
.PanelProducts >div
{
	margin:7px;
	display:inline-block;
	width:14%;
	min-width: 180px;
}
.text_title
{
	font-size:14px;
	font-weight: bold;
	/*background-color:E0EAEA;*/
}
/*не переносить элементы внутри контейнера (осторожно с горизонтальной прокруткой)*/
.inline
{
	display: inline-block;
}
.center
{
	text-align:center;
}
.right
{
	text-align:right;
}

/*----------------------------------------*/
/* 
.PanelConteiner - типичные контейнер - зеленый фон, отступы. 
.PanelSubConteiner - зеленый фон элемент, требующий выделения при наведении - информационный блок
.PanelContent - белый фон, отступы

типичное использование: 
Пример 1 (форма авторизации):
	<center>
		<form method="POST">
			<div class="PanelConteiner" style="width:230px;">
				<div class="PanelContent right">
					Логин: <input class="PanelLogin_Login" name="auth_login" type="text" value="">
				</div>
				<div class="PanelContent right">
					Пароль: <input name="auth_password" type="password" value="">
				</div>
				<div class="PanelContent text_mark">
					<!--текст_сюда-->
				</div>
				<div class="PanelContent">
					<input type="button" value="войти">
				</div>
			</div>
		</form>
	</center>
Пример 2 (редактирование списка товаров):
	<div class="PanelConteiner center">
		<h1>Добавление единицы товара</h1>

		<div class="PanelSubConteiner">
			<div class="PanelContent inline">
				имя: <input type="text" class="input_text_l" value="">
			</div>
			<div class="PanelContent inline">
				цена: <input type="text" class="input_int" value="">
			</div>
		</div>
		
		<div class="PanelSubConteiner">
			<div class="PanelContent inline">
				имя: <input type="text" class="input_text_l" value="">
			</div>
			<div class="PanelContent inline">
				цена: <input type="text" class="input_int" value="">
			</div>
		</div>

	</div>
Пример 3:
	<div class="PanelConteiner">
		<div class="text_title"
			заголовок
		</div>
		
		<div class="PanelSubConteiner inline">
			однотипный блок 1
		</div>
		<div class="PanelSubConteiner inline">
			однотипный блок 2
		</div>
		
		<div class="PanelSubConteiner">
			С новой строки, и на всю строку.
		</div>

		<div class="PanelContent inline">
			<div class="PanelSubConteiner inline">
		</div>	
	</div>
*/

.PanelConteiner
{
	display:block;
	background-color: #D0FFD0;
	border: 1px solid #A0E0A0;
	border-radius: 5px;
	margin:3px;
	padding:5px;
}
.PanelSubConteiner /*если в контейнере несколько однотипных элементов - группируем их*/
{
	background: #FFFFFF;
	background-color: rgba(255,255,255,.7);
	border: 1px solid rgba(0,0,0,0);
	margin-bottom:2px;
	border-radius: 5px;
}
.PanelSubConteiner:hover
{
	border: 1px solid #FFA0A0;
	/*A0E0A0*/
}
/*выбранный элемент*/
.PanelSubConteiner > * :focus
{
	background-color: rgba(255,230,210,.4);
	border: 1px solid rgba(150,0,0,1);
}
.PanelContent
{
	/*background-color: #FFFFFF;*/
	margin: 0px;
	padding:3px 7px;
}
/*----------------------------------------*/

/**/
.text_mark
{
	color:A00000;
}

/*размеры полей ввода*/
/*высота - height:1.2em;*/
.input_text_s
{
	width:100px;
	height:1.3em;
}
.input_text_m
{
	width:170px;
	height:1.3em;
}
.input_text_l
{
	width:350px;
	height:1.3em;
}
.input_int
{
	width:50px;
	height:1.3em;
}