//@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic); @color_error:#e03c42; @color_success:#4fad51; @color_link:#0668a0; @color_link_light:#1675ad; @color_text:#000000; @color_white:#ffffff; @color_gray:#cccccc; //@font_base:'Open Sans',sans-serif; @font_base:Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif; .border_radius(@radius:4px){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } .box_shadow(@shadow){ -webkit-box-shadow:@shadow; -moz-box-shadow:@shadow; box-shadow:@shadow; } .transition(@transition){ -webkit-transition:@transition; -moz-transition:@transition; -o-transition:@transition; transition:@transition; } *{ font-size:1em; font-family:@font_base; } .block_shadow{ .box_shadow(0px 0px 2px 2px fade(@color_text,20%)); } .text_shadow{ text-shadow:1px 1px 4px fade(@color_text,40%); } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins, kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,label,legend,caption{ border:0px; margin:0px; outline:0px; padding:0px; } html,body{ margin:0px; padding:0px; width:100%; } html{ overflow-y:scroll; } body{ margin:0; padding:0; font-family:@font_base; font-size:14px; line-height:16px; color:@color_text; min-width:1280px; } a{ color:@color_link; text-decoration:underline; &:hover{ text-decoration:none; } } article{ p{ margin-bottom:10px; text-align:justify; } ul,ol{ margin-left:20px; margin-bottom:10px; } h1,h2,h3{ margin-bottom:10px; line-height:1.2em; } h1{ font-size:28px; } h2{ font-size:24px; } h3{ font-size:20px; } table{ margin-bottom:10px; border-collapse:collapse; } table{ width:100% !important; border-spacing:3px; border:none; th{ color:#ffffff; background:@color_link; p{ text-align:center; } } tr:nth-child(odd){ background:#DFDFDF; } tr:nth-child(even){ background:#F5F5F5; } td,th{ padding:5px; border:none; h1,h2,h3,p{ margin-bottom:0; } } } } input[type=text],input[type=password],textarea{ border:1px solid @color_gray; &:focus{ border-color:transparent; outline:none; box-shadow:0 0 5px @color_link; } } input[type=submit],input[type=button],button{ background:@color_link; height:28px; padding:0 20px; border:0px; cursor:pointer; color:@color_white; } input[type=text]#captcha{ width:70px; } .page_title{ h1,.h1{ margin-bottom:10px; line-height:1.2em; font-size:30px; font-weight:normal; text-transform:uppercase; color:@color_link; } } .clear{ clear:both; } .mess_err{ color:@color_error; font-weight:bold; } .mess_ok{ color:@color_success; font-weight:bold; } .wrap{ width:980px; margin:0 auto; } #body{ width:100%; min-width:1280px; } header{ position:relative; #top{ height:50px; background:linear-gradient(to bottom,@color_link_light,@color_link); color:@color_white; a{ color:@color_white; } .auth{ float:left; line-height:50px; padding-right:10px; border-right:1px solid @color_gray; a{ display:inline-block; vertical-align:top; padding-left:20px; margin-right:20px; background-position:left center; background-repeat:no-repeat; text-decoration:none; &:hover{ text-decoration:underline; } } a.link_auth{ background-image:url('../images/ico_auth.png'); } a.link_user{ background-image:url('../images/ico_reg.png'); } } nav{ float:left; margin-left:25px; padding-right:20px; border-right:1px solid @color_gray; ul{ list-style:none; li{ display:inline-block; vertical-align:top; margin-right:10px; line-height:50px; a{ } } li.active a{ text-decoration:none; &:hover{ text-decoration:underline; } } } } .basket,.compare{ padding-left:50px; display:table-cell; height:50px; vertical-align:middle; padding-right:15px; font-size:13px; a{ text-decoration:none; &:hover{ text-decoration:underline; } } } .basket{ background:url('../images/ico_cart.png') no-repeat 15px 50%; border-right:1px solid @color_gray; } .compare{ background:url('../images/ico_compare.png') no-repeat 15px 50%; } } #header{ padding:8px 0px; #logo{ float:left; } .oz{ float:right; margin-top:20px; margin-left:20px; width:252px; height:51px; line-height:51px; text-align:center; background:url('../images/bg_oz.png') no-repeat; font-size:16px; a{ display:block; color:@color_white; .text_shadow; text-decoration:none; } } .phone{ float:right; margin-top:20px; line-height:51px; font-size:25px; font-weight:bold; } } } .middle,#main_art{ padding:20px 0px; box-sizing:border-box; } .middle{ background:url('../images/bg_inside_70.jpg') no-repeat top right; } #main,#main_art{ background:url('../images/bg_top_70.jpg') no-repeat top center; background-size:cover; } #main{ height:553px; padding-bottom:0px; } #main_news{ padding:10px 0px 20px; } #top_menu{ position:relative; } #middle{ position:relative; } .left{ float:left; width:270px; box-sizing:border-box; background:@color_white; .border_radius(5px); .block_shadow; .vert_title,.left_title{ border-top-left-radius:5px; border-top-right-radius:5px; padding-left:20px; font-size:18px; text-transform:uppercase; background:linear-gradient(to bottom,@color_link_light,@color_link); color:@color_white; .text_shadow; a{ color:@color_white; .text_shadow; text-decoration:none; &:hover{ text-decoration:underline; } } } .vert_title{ height:46px; line-height:46px; } .left_title{ height:30px; line-height:30px; } nav{ padding:10px 0px 30px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; ul{ list-style:none; li{ border-bottom:1px solid @color_gray; padding:7px 10px 7px 20px; position:relative; a{ padding-right:25px; display:block; background:url('../images/arrow_menu.png') no-repeat center right; color:@color_text; text-decoration:none; } ul{ display:none; position:absolute; top:0px; left:270px; width:270px; z-index:200; background:@color_white; border-left:1px solid @color_gray; li{ a{ background:none; } } } &:hover{ ul{ display:block; } } } li.active > a, li a:hover{ color:@color_link; } } } .left_block{ background:@color_white; .border_radius(5px); .article_items{ .article_item{ border-bottom:1px solid @color_gray; padding:15px 10px 15px 15px; .date{ color:@color_link; margin-bottom:5px; } .name{ a{ color:@color_text; text-decoration:none; &:hover{ text-decoration:underline; } } } } .all{ padding:15px 10px 15px 15px; text-align:right; a{ display:inline-block; padding-left:20px; background:url('../images/arrows_brands.png') no-repeat -13px 50%; } } } } } .content{ float:right; width:695px; position:relative; padding:0; .top_buttons{ margin-bottom:15px; a{ display:block; float:left; line-height:46px; background:linear-gradient(to bottom,@color_link_light,@color_link); padding:0 40px; color:@color_white; text-decoration:none; margin-right:12px; .border_radius(5px); .text_shadow; } .search{ float:right; width:388px; height:46px; background:url('../images/bg_search.png') no-repeat; form{ background:url('../images/input_search.png') no-repeat; width:369px; height:34px; margin:6px auto; position:relative; input[type=text]{ width:320px; height:30px; position:absolute; top:2px; left:10px; padding:0px; border:0px; &:focus{ .box_shadow(none); } } input[type=submit]{ background:url('../images/ico_search.png') no-repeat; width:20px; height:16px; overflow:hidden; text-indent:-1000px; border:0px; cursor:pointer; position:absolute; top:50%; right:10px; margin-top:-8px; } } } } } .inside{ } .page_content{ background:@color_white; .border_radius(5px); .block_shadow; box-sizing:border-box; } .page_content_inner{ padding:25px; } .tab_buttons{ width:704px; height:33px; padding:2px 4px; margin-left:-4px; margin-top:-2px; box-sizing:border-box; background:url('../images/bg_tabs_33.png') no-repeat center center; ul{ display:table; width:100%; table-layout:fixed; li{ display:table-cell; line-height:29px; text-align:center; border-right:1px solid @color_white; color:@color_white; font-size:16px; .text_shadow; cursor:pointer; &:last-child{ border-right:0px; border-top-right-radius:5px; border-bottom-right-radius:5px; } &:first-child{ border-top-left-radius:5px; border-bottom-left-radius:5px; } } li.active,li:hover{ background:@color_link; } } } .tab_tabs{ height:370px; .border_radius(5px); .block_shadow; background:@color_white; margin-top:10px; .tab{ display:none; } #tab_hit,#tab_content{ display:block; } } .catalog_detail_content{ .tab_buttons{ width:625px; background:url('../images/tabs_detail_33.png') no-repeat center center; } .tab_tabs{ height:auto; .tab{ padding:20px; } } } .catalog_item_hit{ width:230px; height:370px; float:left; box-sizing:border-box; text-align:center; padding:20px; border-right:1px solid @color_gray; &:nth-child(3n){ border-right:0px; } .catalog_item_name{ font-size:16px; line-height:24px; a{ color:@color_text; } .catalog_item_photo{ height:210px; img{ max-height:210px; max-width:170px; } } } .catalog_item_price{ color:@color_link; font-size:18px; line-height:20px; margin-bottom:10px; span{ font-weight:bold; } strike{ color:@color_gray; font-weight:normal; } } input[type=submit]{ width:100px; height:33px; border:0px; cursor:pointer; color:@color_white; .text_shadow; padding-left:30px; text-align:left; font-size:13px; text-transform:uppercase; background:url('../images/bg_buy.png') no-repeat center center; } } .catalog_sort { margin-bottom:15px; } .catalog_sort_view { float:right; a { padding-left:17px; margin-left:20px; display:inline-block; color:#a6a6a6; text-decoration:none; background-position:center left; line-height:10px; background-repeat:no-repeat; } a.view_block { background-image:url('../images/ico_view_block.png'); } a.view_block_active,a.view_block:hover { background-image:url('../images/ico_view_block_active.png'); color:@color_link; } a.view_list { background-image:url('../images/ico_view_list.png'); } a.view_list_active,a.view_list:hover { background-image:url('../images/ico_view_list_active.png'); color:@color_link; } } .brands_filter{ .brand_filter_item{ padding:10px; width:140px; display:inline-block; vertical-align:top; text-align:center; margin-right:10px; margin-bottom:10px; background:@color_white; .block_shadow; .border_radius(5px); .brand_filter_item_photo{ height:50px; a{ display:table-cell; vertical-align:middle; width:140px; height:50px; img{ max-width:140px; max-height:50px; } } } .brand_filter_item_name{ a{ color:@color_text; } } } .brand_filter_item_active{ .brand_filter_item_name a{ color:@color_link; text-decoration:none; } } } .catalog{ .catalog_item,.catalog_item_list{ float:left; margin-right:15px; margin-bottom:15px; background:@color_white; .block_shadow; .border_radius(5px); width:220px; box-sizing:border-box; padding:15px; .catalog_item_name{ font-size:16px; line-height:18px; text-align:center; a{ color:@color_text; } } .catalog_item_middle{ padding-top:5px; margin-bottom:10px; .catalog_item_photo{ float:left; text-align:center; width:80px; height:100px; display:table-cell; vertical-align:middle; a{ width:80px; height:100px; display:table-cell; vertical-align:middle; img{ max-height:100px; max-width:80px; } } } .catalog_item_ann{ float:right; width:100px; .catalog_item_part{ color:@color_link; font-size:12px; margin-bottom:5px; } } .catalog_item_descr{ padding:10px 0; font-size:12px; text-align:left; } } article,.catalog_item_compare{ font-size:12px; line-height:14px; height:14px; } .catalog_item_compare{ margin-bottom:5px; a{ text-decoration:none; &:hover{ text-decoration:underline; } } } .catalog_item_price{ width:80px; float:left; font-size:18px; line-height:33px; white-space:nowrap; color:@color_link; margin-top:20px; span{ font-weight:bold; } strike{ color:@color_gray; font-weight:normal; font-size:14px; } } .catalog_item_cart{ text-align:center; float:right; input[type=submit]{ width:100px; height:33px; border:0px; cursor:pointer; color:@color_white; .text_shadow; padding-left:30px; text-align:left; font-size:13px; text-transform:uppercase; background:url('../images/bg_buy.png') no-repeat; } } &:nth-child(3n){ margin-right:0px; } } .catalog_item_list{ width:100%; float:none; margin-right:0px; .catalog_item_photo{ width:150px; float:left; text-align:center; } .catalog_item_right{ float:right; width:500px; .catalog_item_name{ text-align:left; } .catalog_item_ann{ width:100%; float:none; } .catalog_item_cart{ text-align:left; } } } } .catalog_detail{ margin-bottom:20px; .catalog_detail_photo{ float:left; width:335px; .catalog_detail_main_photo{ padding:15px; background:@color_white; .block_shadow; .border_radius(5px); } .catalog_detail_photos{ a{ display:inline-block; vertical-align:top; width:90px; padding:6px; margin:10px 10px 0 0; background:@color_white; .block_shadow; .border_radius(5px); &:nth-child(3n){ margin-right:0px; } } } } .catalog_detail_content{ float:right; width:625px; .catalog_detail_part{ color:@color_link; font-weight:bold; margin-bottom:10px; } .catalog_detail_content_top{ line-height:53px; margin-top:15px; .catalog_detail_compare{ float:left; width:173px; height:53px; box-sizing:border-box; padding:0 20px; background:url('../images/btn_compare.png') no-repeat; a{ display:table-cell; height:53px; vertical-align:middle; color:@color_white; text-decoration:none; padding-left:40px; line-height:18px; background:url('../images/ico_compare.png') no-repeat center left; .text_shadow; } } .catalog_detail_price{ float:right; color:@color_link; font-size:30px; span{ font-weight:bold; } } .catalog_detail_basket{ float:right; margin-left:20px; input[type=submit]{ height:27px; padding:0 20px; font-size:15px; background:@color_link; color:@color_white; .text_shadow; border:0px; cursor:pointer; .border_radius(5px); } } } .catalog_detail_filters{ width:100%; tr{ td,th{ text-align:left; padding:5px 10px; border-bottom:1px solid @color_gray; border-right:1px solid @color_gray; &:last-child{ border-right:0px; } } } } } } .subcategories{ .subcategory{ float:left; margin-right:15px; margin-bottom:15px; background:@color_white; .block_shadow; .border_radius(5px); width:220px; text-align:center; .subcategory_photo{ height:170px; a{ width:220px; vertical-align:middle; display:table-cell; height:170px; } } .subcategory_name{ height:60px; font-size:16px; .block_shadow; a{ height:60px; width:200px; padding:0 10px; vertical-align:middle; display:table-cell; color:@color_white; .text_shadow; background:url('../images/sc_name.png') no-repeat center center; border-bottom-left-radius:5px; border-bottom-right-radius:5px; text-decoration:none; } } &:hover{ .subcategory_name{ a{ background:@color_link; } } } &:nth-child(3n){ margin-right:0px; } } } .compare_table{ width:100%; border-collapse:collapse; table-layout:fixed; tr{ td{ padding:7px; /* border-bottom:1px dashed @color_gray; border-right:1px dashed @color_gray; &:last-child{ border-right:0px; } */ } &:nth-child(even){ background:#f4f0ec; } } .photo{ position:relative; vertical-align:top; a{ text-decoration:none; display:inline-block; background:@color_white; .block_shadow; .border_radius(5px); text-align:center; padding:10px; max-width:140px; color:@color_text; img{ margin-bottom:10px; } } .delete_from_compare{ display:block; margin-bottom:5px; background:@color_link; color:@color_white; .border_radius; padding:2px 4px; } } .name{ font-weight:bold; text-transform:uppercase; a{ text-decoration:none; &:hover{ text-decoration:underline; } } } .param{ font-weight:bold; } } .bc{ font-size:12px; margin-bottom:10px; } .filters_form{ padding:20px; .catalog_range{ margin-bottom:10px; line-height:30px; .range_cnt{ margin-bottom:10px; } .range_left{ float:left; } .range_right{ float:right; } input[type=text]{ width:90px; height:30px; box-sizing:border-box; .border_radius(5px); border:1px solid @color_gray; text-align:center; } } .catalog_filter_item{ margin-bottom:10px; .catalog_filter_name{ margin-bottom:4px; } .catalog_filter_vars{ line-height:22px; font-size:13px; input{ border:1px solid @color_gray; } } } .catalog_filters_submit{ padding:0 20px; display:inline-block; @h:25px; height:@h; line-height:@h; .border_radius(5px); color:@color_white; .text_shadow; text-align:center; font-size:15px; margin:0 auto; background:@color_link; cursor:pointer; } } footer{ height:150px; width:100%; background:@color_link; color:@color_white; a{ color:@color_white; } .footer_left{ float:left; nav{ width:340px; margin-bottom:20px; margin-top:15px; ul{ list-style:none; li{ width:45%; display:inline-block; vertical-align:top; font-size:15px; line-height:25px; a{ text-decoration:none; &:hover{ text-decoration:underline; } } } } } .copy{ color:#d4d3d3; font-size:13px; } } .footer_right{ float:right; margin-top:20px; width:335px; height:90px; background:url('../images/logo_bottom.png') no-repeat; } } .form{ td{ padding-bottom:4px; } input[type=text],textarea{ width:400px; margin-bottom:7px; } input[type=text]{ padding:2px 7px; } textarea{ padding:7px; resize:none; } } .pages{ padding:20px 0px; ul{ list-style:none; text-align:center; li{ display:inline-block; margin:0px 5px; line-height:20px; font-weight:bold; a{ display:inline-block; width:20px; text-align:center; text-decoration:none; color:#ffffff; background:@color_link; .border_radius(50%); &:hover{ background:transparent; color:@color_link; } } } } } .popup_page{ padding:40px; } #color_changer { li{ cursor:pointer; border:1px solid @color_text; display:inline-block; width:20px; height:20px; margin:0 5px 5px 0; vertical-align:top; } li.active{ border:1px solid @color_error; } } #back_top{ position:fixed; bottom:50px; right:50px; background:url('../images/arrow_up.png') @color_link no-repeat center center; opacity:0.7; .transition(1s); &:hover{ opacity:1; } a{ width:50px; height:50px; display:block; } } .termins{ .termins_letter{ font-size:1.5em; line-height:1.6em; font-weight:bold; } .termins_letter_container{ margin-bottom:1.5em; .termin_item{ width:30%; float:left; padding-bottom:0.4em; } } } //slides #slides,#hit,#relative{ position:relative; .slides_container{ width:695px; height:375px; overflow:hidden; position:relative; display:none; .slide{ width:695px; height:375px; display:block; } a.slide img{ .border_radius(5px); .block_shadow; display:block; } } .next,.prev{ position:absolute; top:50%; margin-top:-20px; width:40px; height:40px; display:block !important; z-index:101; background-image:url('../images/arrows_slider.png'); background-repeat:no-repeat; background-color:fade(@color_text,50%); } .prev{ left:0px; background-position:center left; } .next{ right:0px; background-position:center right; } } #relative{ .block_shadow; .border_radius(10px); margin-top:20px; .slides_container{ width:980px; .slide{ width:980px; } .catalog_item_hit{ width:245px; &:nth-child(3n){ border-right:1px solid @color_gray; } &:nth-child(4n){ border-right:0px; } } } } .pagination{ position:absolute; width:100%; bottom:20px; z-index:999; text-align:center; } .pagination li{ display:inline-block; margin:0 2px; list-style:none; } .pagination li a{ display:block; width:12px; height:0; padding-top:12px; background-image:url('../images/pagination.png'); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a{ background-position:0 -12px; } //tinycarousel #brands{ height:1%; overflow:hidden; padding:30px 0px; .viewport{ float:left; width:940px; height:50px; overflow:hidden; position:relative; } .buttons{ width:13px; height:14px; overflow:hidden; text-indent:-1000px; background-image:url('../images/arrows_brands.png'); background-repeat:no-repeat; display:block !important; margin-top:18px; float:left; position:relative; } .prev{ background-position:left center; margin-right:7px; } .next{ background-position:right center; margin-left:7px; } .disable{ opacity:0.5; } .overview{ list-style:none; position:absolute; padding:0; margin:0; width:940px; left:0; top:0; li{ float:left; height:50px; width:188px; a{ display:table-cell; vertical-align:middle; width:188px; height:50px; text-align:center; img{ max-width:180px; max-height:50px; } } } } } .ui-slider-horizontal{ height:6px !important; border-radius:none !important; } .ui-slider-range{ height:6px !important; border-radius:none !important; background:@color_link !important; } .ui-slider-handle{ width:14px !important; height:14px !important; top:-4px !important; background:url('../images/ui_handle.png') no-repeat !important; border-radius:none !important; border:0px !important; } //cart .cart_payer,.cart_delivery{ margin-bottom:20px; font-size:16px; line-height:30px; input[type=radio]{ border:1px solid @color_gray; border-radius:0px; background:@color_white; } } .delivery_text{ font-size:16px; line-height:20px; p{ margin-bottom:20px; } } .cart_order{ text-align:right; input[type=submit]{ height:45px; padding:0 20px; color:@color_white; .text_shadow; font-size:16px; .border_radius(5px); background:@color_link; cursor:pointer; border:0px; } } .cart_title{ font-size:18px; line-height:20px; margin-bottom:20px; font-weight:bold; color:@color_link; } .cart_items{ list-style:none; width:100%; display:table; background:@color_white; .block_shadow; .border_radius(5px); } .cart_item{ padding:10px 0px; display:table-row; div{ display:table-cell; vertical-align:middle; padding:10px; text-align:center; border-bottom:1px solid @color_gray; /* &:last-child{ border-right:0px; } */ input[type=text]{ text-align:center; width:40px; border:0px; } input[type=button]{ cursor:pointer; width:22px; height:22px; } } } .cart_item_head{ background:#f9f9fa; div{ padding:7px 0; text-align:center; border-right:1px dotted #ffffff; } } .cart_item_photo{ width:100px; } .cart_item_name{ a{ color:@color_text; } } .cart_item_price{ width:150px; color:@color_link; font-weight:bold; } .cart_item_count{ width:150px; } .cart_item_delete{ width:100px; } a.cart_delete{ color:#a0a0a0; } .cart_summary{ font-size:18px; padding:10px 0px; text-align:right; font-weight:bold; color:@color_link; input{ margin-left:50px; margin-right:10px; color:#ffffff; cursor:pointer; background:@color_link; border:0px; padding:5px 15px; border-radius:3px; } } #global_price{ font-weight:bold; } .cart_form{ font-size:16px; input[type=text],textarea{ width:90%; box-sizing:border-box; border:1px solid @color_gray; } input[type=text]{ height:35px; padding:0 10px; } textarea{ resize:none; height:120px; padding:10px; } table{ margin-top:10px; width:100%; tr{ td{ padding-bottom:10px; padding-right:10px; white-space:nowrap; &:nth-child(2n){ padding-right:40px; } &:nth-child(4n){ padding-right:0px; } sup{ font-size:11px; line-height:12px; } } td.cart_form_title{ font-size:16px; } } } sup{ font-size:0.7em; } } #cart_animation{ opacity:0; position:absolute; top:10px; right:10px; width:15px; height:15px; background:url('../images/ajax_loader.gif'); } .hide{ display:none; } sup.req{ color:#e03c42; font-size:10px; } .sber{ font-size:15px; margin:10px 0; display:none; }