@charset "UTF-8";
 /* глобально */
A       { color: #462; text-decoration: underline; font-style: italic; }
A:hover { color: #F90; font-style: bold; }
H1 { font-size: 16px; color: #F60; margin-top: 0px;}
H2 { font-size: 18px; color: #F60; margin-top: 0px;}
H3 { font-size: 26px; color: #462; line-height: 0.1;}
 /* тело */
BODY      { font:Arial, Helvetica, sans-serif; font-size: 16px; margin:0; }
input, textarea {font-size: 16px; font-family: Arial, Helvetica;}
textarea { border-style:none;}
.r_gradient {background: #462; background: linear-gradient(90deg, #462, #FF6, #FF6, #462);-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; }
.r_main   { position:relative; margin:0 auto; width: 900px; text-align: left; background-image: url(fon/Bg_Page.jpg); }
 /* заголовок */
.r_head   { position:relative; width: 100%; height:467px; background:url(fon/bighead.jpg); }
.r_titl1  { position:absolute; left: 346px; top: 12px ; font-size: 64px; color: #FEA; text-shadow: 1px 1px 0px #000; font-family: 'Thonburi';} 
.r_titl2  { position:absolute; left: 349px; top: 112px; font-size: 14px; color: #FEA; text-shadow: 1px 1px 0px #000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;}
 /* корзина .r_sub_basket:hover { background: #000; }background: radial-gradient(rgba(255,255,255,1) 20%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 51%); */
.r_basket {position:fixed; left: 50%; top:  100px;}
.rb_sub              {position:absolute; left: 370px; width: 160px; height: 160px; text-align: center; font-size: 14px; z-index: 4; font-weight: bold; background:url(fon/r_bask.png)}
.rb_sub2             {position:absolute; left: 455px; top:150px; text-align: left; font-size: 14px; z-index: 4; font-weight: bold;}
.rb_sub:hover::after {position:absolute; left: 18px;  top: 15px; padding: 3px; font-size: 11px; color: #FFF; content: attr(data-title); text-shadow: none; background-color: #7A4; z-index: 10; white-space: nowrap; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;}
.rb_fon0 {background-position: 0px    0px;}
.rb_fon1 {background-position: 0px -155px;}
.rb_fon2 {background-position: 0px -310px;}
.rb_fon3 {background-position: 0px -465px;}
.rb_fon4 {background-position: 0px -620px;}
.rb_fon5 {background-position: 0px -775px;}
.rb_txt  {position:relative; padding-top:75px; left:2px; color: #040; text-shadow: 0px 0px 2px #FFF;  text-align:center; font-family: 'Thonburi';}
.rb_edit_txt {position:relative; left: 80px; top:40px; text-align:left; color: #040; text-shadow: 0px 0px 2px #FFF; font-family: 'Thonburi'; overflow: visible; white-space:nowrap; }
.ra_input { position:relative; width: 55%; margin: 3px 10px 10px 10px; float: right; height: 25px; font-size: 18px;  padding-left: 5px;  border:#000 1px solid; border-radius:3px;}
.ra_input:focus {background: #efa; border:#462 1px solid; box-shadow: 0 0 5px #462; -webkit-box-shadow: 0 0 5px #462; -moz-box-shadow: 0 0 5px #462; }
input {font:Arial, Helvetica, sans-serif; font-size:14px; }
input:focus {z-index: 20;}
label { position:relative; float: right; margin: 14px 0px 0px 0px; text-align: right;}
.field { position:relative; width: 100%; clear: both; }
.button { cursor:pointer; display:block; padding:  3px; float: left; margin: 10px; height:25px; width:200px; text-align:center; background: #462; font-size: 18px; background: linear-gradient(180deg, #FF6, #462); border-color:#000; border-style:solid; border-radius:5px; border-width:1px; }
.button:hover { background: #FF6; box-shadow: 0 0 10px #462; -webkit-box-shadow: 0 0 10px #462; -moz-box-shadow: 0 0 10px #462; } /* зеленая кнопка */
 /* меню */
.r_c2menu, .r_c1menu             { position:absolute; left: -18px; height: 40px; color: #462; text-decoration: none; font-style:italic; white-space:nowrap; font-size: 18px; cursor: pointer }
.r_c1menu, .r_c2menu             { padding:  5px 0px 0px 50px; margin: 10px 0px 0px 14px;  background:url(fon/flower2.png); background-repeat: no-repeat;}
.r_c1menu:hover, .r_c2menu:hover { padding: 15px 0px 0px 64px; margin:  0px 0px 0px  0px;  background:url(fon/flower3.png); background-repeat: no-repeat; z-index: 2;} 
.r_c2menu   { color: #684; }
.r_menu0,.r_menu1,.r_menu2 {font-size: 22px;} 
.r_menu0  { top:  50px; } .r_menu1  { top:  92px; } .r_menu2  { top: 134px; } .r_menu3  { top: 176px; } .r_menu4  { top: 218px; } .r_menu5  { top: 260px; } .r_menu6  { top: 302px; } .r_menu7  { top: 344px; } 
 /* контент */
.r_content   { position:relative; left: 87px; width: 723px; text-align:center;}
.r_message   { position:relative; padding:15px; text-align: left }
.r_separator { position:relative; padding: 40px 10px 20px 10px; width: 100%; clear: both; text-align:center; } 
.r_no_flow   { position:relative; padding: 10px 10px 10px 10px; width: 100%; clear: both; text-align:center; font-size: 20px; color: #462;}
.r_item      { position:relative; width: 241px; height: 360px; padding: 0px 0px 0px 0px;   float: left; color: #000; text-align: center; overflow: hidden;background:url(fon/fon.png); background-repeat: no-repeat;} 
.r_item_str  { position:relative; width: 703px; height:  40px; padding: 2px 10px 2px 10px; float: left; color: #000; text-align: left;  }
.r_item_str:hover, .r_item:hover { position:relative; box-shadow: 0px 0px 20px #000; z-index: 1;}
/* стили подписей под фото */
.r_img     {position: relative; float: left; width: 220px; top:15px; left:11px; height:195px; z-index: 5;}
.js_basbar {position: relative; float: left;}

.ri_name_str, .ri_text, .ri_cod_str, .ri_order_str, .ri_cost_str, .ri_sum_str, .js_basbar, .js_tag, .js_block, .js_cod, .js_edit 
{position:relative; padding: 0px 5px 0px 5px; float: left; text-align: center; font-size: 16px;}
.fi_memo, .fi_quant, .fi_name { position:relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 230px; float: left; text-align: center; font-size: 16px; border-color: #fff; border-style:none;}
.fin_quant, .fin_cost { width: 40px; font-size: 16px;  margin:0px; padding: 0px; border-color: #fff; border-style:none; text-align: center;}
.fi_memo {height: 80px; left:-4px;}
.ri_text, .r_item .js_tag, .r_item .js_basbar { width: 230px;}
.r_item_str .js_tag 	{ width: 110px; top:10px;}
.r_item_str .js_basbar  { width: 110px; top:12px;}
.ri_cost_str, .ri_sum_str   { width: 70px;}
.js_cod { width: 60px; top:12px; font-size: 12px; opacity: 0.3;}
.ri_name, .fi_name, .ri_name_str { position:relative; font-size: 18px; font-weight: bold; overflow: hidden;}
.ri_name_str {top:-3px; height: 43px;}
.js_cost, .js_sum {font-weight: bold;}
.ri_name_str { width: 165px; }
.ri_name     { width: 240px; height: 22px;}
.ri_center   { vertical-align:middle; text-align: center; height: 38px; width: 165px;  padding:0px;}
.ri_tag0 {color: #280;} 
.ri_tag1 {color: #880;} 
.ri_tag2 {color: #820;}
/* rb_mayak  нужен для анимации! НЕ УДАЛЯТЬ!*/
.#rb_mayak{position:absolute; top: 40px; left: 40px; width: 85px; height: 20px;}
.ri_cod_str, .ri_order_str, .ri_sum_str, .ri_cost_str {top: 10px;}
 /* блок или картинка со всплывающей подсказкой  } */
.minus, .plus, .ri_down, .ri_up, .ri_del, .ri_add, .ri_edit, .js_fant, .ri_edit_mode { position:relative; float: left; border:0px; opacity:0.5; cursor: pointer; z-index: 5; width: 20px; height: 20px; }
.ri_down, .ri_up, .ri_del, .ri_add, .ri_edit, .rm_edit {opacity:0.3;}
.ri_edit_mode           { left: 567px; top:  55px; opacity:0;} 
.js_fant                { width: 40px; height: 20px; margin: 0px 10px -10px 10px; top:-14px; padding: 15px 0px 0px 1px; text-shadow: 1px 1px 2px #FFF, 0 0 20px #0F0; text-align:center; opacity: 0.8; cursor: default;background:url(fon/b.png);background-repeat: no-repeat;}
.minus:hover,.plus:hover,.ri_down:hover,.ri_up:hover,.ri_del:hover,.ri_add:hover,.ri_edit:hover,.js_fant:hover, .ri_edit_mode:hover  { opacity:1;}
.minus:hover::after,.plus:hover::after,.ri_down:hover::after,.ri_up:hover::after,.ri_del:hover::after,.ri_add:hover::after,.ri_edit:hover::after,.js_fant:hover::after,.ri_edit_mode:hover::after
{ position:absolute; left:-20px; bottom: 30px; padding: 3px; font-size: 11px; color: #FFF; text-shadow: none; background-color: #7A4; z-index: 10; white-space: nowrap; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;} 
.minus:hover::after		{content: "-1 ИЗ ЗАКАЗА";}
.plus:hover::after		{content: "+1 К ЗАКАЗУ";}
.ri_down:hover::after	{content: "ОПУСТИТЬ";}
.ri_up:hover::after		{content: "ПОДНЯТЬ";}
.ri_del:hover::after	{content: "УДАЛИТЬ";}
.ri_add:hover::after	{content: "ДОБАВИТЬ ВПЕРЕДИ";}
.ri_edit:hover::after	{content: "РЕДАКТИРОВАТЬ" ; left:-30px;}
.js_fant:hover::after	{content: "КОЛИЧЕСТВО ЗАКАЗАННОГО";}
.ri_edit_mode:hover::after {content: "ПЕРЕЙТИ В РЕЖИМ РЕДАКТИРОВАНИЯ";}
.rt0  {background-position: 0px    0px;}
.rt1  {background-position: 0px  -38px;}
.rt2  {background-position: 0px  -76px;}
.rt3  {background-position: 0px -114px;}
.rt4  {background-position: 0px -152px;}
.rt5  {background-position: 0px -190px;}
.r_tabl  { margin-left: 20px; }
 /* стрелка купи средствами CSS (не для серьезного проекта) */
.r_bay1 { position:absolute;opacity: 0; left: 80px; width: 50px; font-size: 14px; padding: 0px 5px 2px 5px; color: #FFF; background: linear-gradient(90deg, rgb(80,114,45), rgb(165,184,80));white-space: nowrap; font-family: 'Thonburi';}
.r_bay2 { position:absolute;            left: 60px; top: 0px;  border-top: 10px solid #FFF; border-left: 6px solid rgb(165,184,80); border-bottom: 10px solid #FFF;}
@-webkit-keyframes bounceInLeft {
  0%  { opacity: 0; -webkit-transform: translateX(-100px); 	transform: translateX(-100px);}
  40% { opacity: 1; -webkit-transform: translateX(0px);  	transform: translateX(0px);}
  60% { opacity: 1; -webkit-transform: translateX(-10px);	transform: translateX(-10px);}
  80% { opacity: 1; -webkit-transform: translateX(0px);		transform: translateX(0px);}
 100% { opacity: 0; -webkit-transform: translateX(0);		transform: translateX(0);}}
@keyframes bounceInLeft {
  0%  { opacity: 0; -webkit-transform: translateX(-100px);  -ms-transform: translateX(-100px); transform: translateX(-100px);}
  40% { opacity: 1; -webkit-transform: translateX(0px);    -ms-transform: translateX(0px);   transform: translateX(0px);}
  60% {	opacity: 1;	-webkit-transform: translateX(-10px);	-ms-transform: translateX(-10px);  transform: translateX(-10px);}
  80% {	opacity: 1;	-webkit-transform: translateX(0px);	-ms-transform: translateX(0px);  transform: translateX(0px);}
 100% { opacity: 0; -webkit-transform: translateX(0);		-ms-transform: translateX(0);	   transform: translateX(0);}}
.r_item:hover .js_bay { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; -webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.r_transfer { border: 3px dotted gray; }
 /* искуственное выделение / включение / отключение  .edit_on  { opacity: 0.7; } */
#empty, .empty, .all_off, .js_only, .js_bay, .edit_only, #empty_separator, #l_error,#SendOrder,.OrderMenu { display: none; }
.red_error {color: red;}
.r_hide   {visibility: hidden; }
 /* fancybox & lazy */
.r_img_str  { position:relative; float: left; top:1px; width: 50px; height: 40px; background:url(fon/load.gif);background-repeat: no-repeat; } 
.fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; }
.r_img .lazy { display: none; width: 220px; height: 165px;}
 /* решение проблемы центрования блока содержащего обтекаемые элементы и искуственный отступ при обтекании*/
.r_a_cntr  { position: relative; float: right; right: 50%;} 
.r_cntr    { position: relative; float: left; left: 50%; }
 /* кнопки редактирования */
.minus  {background:url(fon/unbay.png);}
.plus   {background:url(fon/bay.png);  }
.ri_down{background:url(fon/down.png); }
.ri_up  {background:url(fon/up.png);   }
.ri_del {background:url(fon/del.png);  }
.ri_add {background:url(fon/add.png);  }
.ri_edit{background:url(fon/edit.png); }
.ri_edit_mode{background:url(fon/n_edit.png);}

 /* конец страницы */
.r_bottom { position:relative; width:100%; height:40px; padding-top :25px; text-align: center; color: #B84; background:url(fon/Footer.jpg); font-size:10px;} 
.r_ref_bottom { color: #B84;  font-size:10px; } 
#ra_file_send   {text-align: center;}
#ra_file_output {height: 270px;}
.view_only, .edit_only {position:relative; }