/* --- Sashera-med --- */ /* ------------------- */ @text: 'Open Sans', sans-serif; @secondaryColor: #ff8000; @mainColor: #1d7a55; .transition(@duration:500ms, @func:ease) { -webkit-transition: all @duration @func; -moz-transition: all @duration @func; -ms-transition: all @duration @func; -o-transition: all @duration @func; transition: all @duration @func; } .delay(@time:500ms) { -webkit-transition-delay: @time; -moz-transition-delay: @time; -ms-transition-delay: @time; -o-transition-delay: @time; transition-delay: @time; } .insetShadow(@horizontal:0px, @vertical:0px, @blur:10px, @spread:-3px, @opacity:0.5) { -webkit-box-shadow: inset @horizontal @vertical @blur @spread rgba(0,0,0,@opacity); box-shadow: inset @horizontal @vertical @blur @spread rgba(0,0,0,@opacity); } .boxshadow(@horizontal:0px, @vertical:5px, @blur:10px, @spread:-10px, @opacity:0.8) { -webkit-box-shadow: @horizontal @vertical @blur @spread rgba(0,0,0,@opacity); box-shadow: @horizontal @vertical @blur @spread rgba(0,0,0,@opacity); } .radius(@around:5px) { -webkit-border-radius: @around; border-radius: @around; } html, body, #wrap { height: 100%; } body > #wrap { min-height: 100%; height: auto; } body { overflow-x: hidden; background: #fff; cursor: default; color: #000; } body * { font-family: @text; } #main { padding: 159px 0 190px; width:100%; } .clearfix { display: inline-block; } .clearfix:after { visibility: hidden; margin-top: -3px; display: block; content: "."; clear: both; height: 0; } .centerBlock { position: relative; background: none; display: block; margin: 0 auto; width: 1200px; } .clear {clear: both;} .left {float: left;} .right {float: right;} h1 { margin-bottom: 20px; color: @mainColor; font-size: 55px; display: block; } h2 { font-size: 24px; display: block; margin: 20px 0; color: #000; } #header { background: #fff; position: fixed; display: block; z-index: 100; width: 100%; .authorizedPart { display: block; float: right; .pOffice { margin: 10px 20px 10px 0; cursor: pointer; display: block; width: 180px; float: left; .icon { background: url(../img/apoffice.jpg) left top no-repeat; margin-right: 5px; display: block; height: 39px; width: 38px; float: left; } p { font-weight: bold; color: @mainColor; font-size: 16px; display: block; } span { font-size: 12px; } } .cart { text-decoration: none; cursor: pointer; display: block; margin: 10px 0; width: 130px; float: left; .icon { background: url(../img/cart.jpg) left top no-repeat; margin-right: 5px; display: block; height: 39px; width: 38px; float: left; } p { font-weight: bold; color: @mainColor; font-size: 16px; display: block; } span { font-size: 12px; color: #000; } } } .logo { background: url(../img/logo.png) left top no-repeat; background-size: contain; text-decoration: none; color: @mainColor; font-size: 35px; display: block; margin: 11px 0; height: 37px; width: 152px; float: left; } .phone { margin: 16px 140px; display: block; float: left; span { color: @secondaryColor; font-weight: bold; font-size: 24px; float: left; } p { line-height: 24px; font-size: 16px; float: left; } } .search { position: relative; margin-left: 5px; padding: 10px 0; display: block; float: right; input[type=text], input[type=search] { padding: 2px 22px 3px 5px; position: relative; color: @mainColor; background: #fff; font-size: 16px; display: block; height: 24px; width: 213px; border: 0; .radius; } input[type=submit] { background: url(../img/loop.png) 3px center no-repeat; position: absolute; cursor: pointer; display: block; height: 18px; width: 18px; color: #fff; right: 3px; border: 0; top: 13px; } } .mainmenu { background: @mainColor; position: relative; display: block; ul { display: block; float: left; .mainmenuBut { background: url(../img/mainmenu_but.gif) center no-repeat; background-size: contain; text-align: center; position: absolute; cursor: pointer; display: none; content: '.'; height: 40px; width: 53px; color: #fff; top: -69px; left: 10px; } li { position: relative; display: block; float: left; a { text-decoration: none; text-align: center; padding: 14px 12px; font-size: 16px; display: block; color: #fff; .transition; } ul { border: 2px solid @mainColor; border-top: 0; position: absolute; background: #fff; display: none; top: 100%; left: 0; li { min-width: 150px; display: block; a { border-bottom: 2px solid #fff; text-decoration: none; display: inline-block; margin: 0 15px 3px; line-height: 18px; color: @mainColor; text-align: left; padding: 3px 0 0; font-size: 16px; } } } ul:after { background: url(../img/treangle.gif) left top no-repeat; position: absolute; line-height: 2px; display: block; content: '.'; height: 5px; width: 10px; color: #fff; z-index: 2; left: 20px; top: -5px; } } li.active { ul { display: block; } } li:hover, li.active { ul { display: block; li { a:hover { border-bottom: 2px solid @mainColor; } } } } } } } #footer { background: @mainColor; margin-top: -190px; position: relative; padding-top: 30px; height: 160px; color: #fff; .devcr { text-align: right; float: right; a { color: #fff; } a:hover { color: @secondaryColor; } .devlogo { background: url(../img/logo_r.png) left top no-repeat; margin: 3px 0 3px 70px; position: relative; display: block; height: 47px; width: 172px; } .devlogo:after { background: url(../img/logo_r.png) left bottom no-repeat; color: @secondaryColor; text-align: center; position: absolute; display: block; content: '.'; height: 43px; width: 172px; bottom: 9px; opacity: 0; z-index: 1; left: 0; } .devlogo:hover:after { opacity: 1; } span { margin-top: 120px; text-align: right; font-size: 10px; display: block; } } .subscribe { margin-right: 110px; display: block; float: left; h3 { margin-bottom: 10px; font-weight: bold; font-size: 16px; } form { display: inline-block; margin-bottom: 10px; position: relative; input[type=email] { padding: 4px 102px 5px 10px; color: @mainColor; font-size: 11px; display: block; width: 168px; border: 0; .radius; } input[type=submit] { background: url(../img/signup.png) left top no-repeat; border: 2px solid #fff; position: absolute; cursor: pointer; display: block; height: 24px; width: 102px; right: 0; .radius; top: 0; } input[type=submit]:hover { background: url(../img/signup.png) left bottom no-repeat; } } .copyrights { margin-bottom: 10px; font-size: 12px; display: block; width: 215px; color: #fff; p { margin-bottom: 10px; } a { text-decoration: none; color: #fff; } a:hover { text-decoration: underline; } } } .soc { margin-right: 90px; display: block; width: 225px; float: left; h3 { margin-bottom: 20px; font-weight: bold; font-size: 16px; } a { background: url(../img/soc.jpg) no-repeat; margin: 0 10px 10px 0; display: block; opacity: 0.8; .radius(50%); height: 44px; width: 44px; float: left; } a:hover { opacity: 1; } .fb { background-position: 0px top; } .rss { background-position: -44px top; } .twit { background-position: -88px top; } .you { background-position: -132px top; } .ok { background-position: -176px top; } .vk { background-position: -220px top; } .lj { background-position: -264px top; } .mail { background-position: -308px top; } } .links { margin-right: 60px; display: block; width: 225px; float: left; h3 { margin-bottom: 20px; font-weight: bold; font-size: 16px; } a { text-decoration: none; margin-bottom: 10px; font-size: 12px; display: block; color: #fff; } a:hover { text-decoration: underline; } } .contacts { margin-bottom: 0; display: block; float: left; h3 { margin-bottom: 20px; font-weight: bold; font-size: 16px; } p { margin-bottom: 5px; padding-left: 25px; line-height: 18px; font-size: 12px; display: block; } a { text-decoration: none; color: #fff; } .address { background: url(../img/mark.png) 2px top no-repeat; } .phone { background: url(../img/phone.png) 2px top no-repeat; } .email { background: url(../img/email.png) left top no-repeat; } .site { background: url(../img/site.png) left top no-repeat; } } } .mainSlider { position: relative; overflow: hidden; display: block; margin: 50px 0; width: 1200px; .browse { background: url(../img/arrows.png) no-repeat; position: absolute; margin-top: -9px; cursor: pointer; display: none; height: 18px; width: 21px; z-index: 10; top: 50%; } .prev { background-position: left top; left: 40px; } .next { background-position: right top; right: 40px; } .scrollable { position: relative; overflow: hidden; height: 300px; width: 1200px; .items { position: absolute; width: 20000em; .oneItem { text-align: center; position: relative; display: block; float: left; img { text-align: center; position: relative; display: block; width: 300px; float: left; } .text { position: relative; text-align: left; background: none; display: block; width: 900px; float: left; h3 { color: @secondaryColor; margin-bottom: 20px; font-size: 40px; } p { margin-bottom: 20px; line-height: 18px; font-size: 16px; } .readmore { margin-bottom: 20px; color: @mainColor; font-size: 14px; } .buy { background: url(../img/buy.png) left top no-repeat; margin: 21px 10px 0 0; display: block; height: 50px; width: 182px; float: left; } .buy:hover { background: url(../img/buy.png) left bottom no-repeat; } .toShop { background: url(../img/to_shop.png) left top no-repeat; margin-top: 20px; display: block; height: 52px; width: 452px; float: left; } .toShop:hover { background: url(../img/to_shop.png) left bottom no-repeat; } } } } } .navi { vertical-align: bottom; position: absolute; display: block; bottom: 35px; z-index: 5; left: 70px; a { background: #fff url(../img/slider_dot.png) left top no-repeat; margin-right: 10px; position: relative; cursor: pointer; display: block; .radius(50%); height: 16px; width: 16px; float: left; } a.active { background: #fff url(../img/slider_dot.png) right top no-repeat; } } } .infografics { margin-bottom: 50px; display: block; height: 60px; .wrapper { display: block; margin: 0 7px; float: left; img { margin-right: 20px; display: block; width: 60px; float: left; } p { vertical-align: middle; display: table-cell; line-height: 18px; color: @mainColor; font-size: 14px; height: 60px; width: 145px; } } } .products { margin-bottom: 30px; display: block; .wrapper { text-decoration: none; margin: 0 10px 20px; text-align: center; display: block; height: 250px; width: 170px; float: left; .img { border: 2px solid #fff; margin: 0 auto 20px; overflow: hidden; display: block; height: 166px; width: 166px; .radius(50%); img { min-height: 170px; min-width: 170px; max-width: 170px; display: block; } } p { text-decoration: none; margin-bottom: 5px; font-size: 16px; color: #000; } span { font-size: 12px; color: #8f8f8f; } } .wrapper:hover { .img { border: 2px solid @mainColor; } p, span { text-decoration: underline; } } } .greenLine { background: @mainColor; margin-bottom: 50px; display: block; } .bigInfo { text-align: center; line-height: 55px; font-size: 45px; padding: 20px 0; display: block; color: #fff; span { font-weight: bold; font-size: 55px; } } #bodyMap { .pattern { .boxshadow(0px,0px,10px,-3px,0.8); position: relative; background: #fff; overflow: hidden; display: block; .radius(10px); padding: 20px; height: 690px; width: 460px; float: left; z-index: 2; h3 { margin-bottom: 10px; font-weight: bold; color: @mainColor; font-size: 20px; display: block; } .systems { margin-bottom: 20px; position: relative; z-index: 1; .jq-selectbox__select { background: #fff url(../img/checked_bg.gif) 3px center no-repeat; padding: 3px 0 3px 27px; border: 1px solid #ccc; color: @mainColor; font-size: 18px; cursor: pointer; display: block; outline: none; width: 429px; z-index: 2; .radius; } .jq-selectbox__dropdown { border: 1px solid #ccc; color: @mainColor; background: #fff; margin-top: -6px; width: 456px; z-index: 1; .radius; ul { overflow-y: hidden!important; padding: 5px 0 0; .radius; li { padding: 1px 0 2px 27px; cursor: pointer; } li:hover { background: @mainColor; color: #fff; } } } } .tabs { ul { background: @mainColor; position: absolute; display: block; margin: -2px; z-index: 2; bottom: 0; left: 0; li { padding: 15px 48px; display: block; outline: none; float: left; a { text-decoration: none; text-align: center; font-size: 16px; display: block; outline: none; color: #fff; } } .ui-tabs-active { background: url(../img/treangle1.gif) center top no-repeat; } } div { background-position: center top; background-repeat: no-repeat; position: relative; display: block; height: 600px; width: 100%; } #tabs-1 { background-image: url(../img/system1_m.png); } #tabs-1 span { background-position: center top; background-repeat: no-repeat; position: absolute; display: block; height: 100%; width: 100%; left: 0; top: 0; } } } .infoBox { position: relative; padding: 20px 30px; margin-left: -2px; display: block; width: 640px; float: left; z-index: 1; h3 { background: url(../img/arrow_left_green.gif) left center no-repeat; margin: 0 0 20px -30px; padding-left: 30px; font-weight: bold; color: @mainColor; font-size: 18px; display: block; } .tabs { ul { li { border: 1px solid #ccc; margin: 0 10px 10px 0; background: #fff; cursor: pointer; display: block; outline: none; padding: 5px; float: left; .radius; a { text-decoration: none; outline: none; color: #000; } } .ui-tabs-active { border: 1px solid @mainColor; background: @mainColor; a { color: #fff; } } } div { h3 { margin: 40px 0 20px -30px; } p { margin-bottom: 10px; font-size: 12px; display: block; color: #000; } } } } .scroll-pane { overflow: auto; outline: none; height: 170px; float: left; width: 99%; } .scroll-content { outline: none; width: 100px; float: left; } .scroll-content-item { width: 90px; height: 120px; float: left; outline: none; margin: 0 10px; cursor: pointer; text-align: center; .item { .img { margin: 0 auto 10px; overflow: hidden; display: block; .radius(50%); height: 90px; width: 90px; img { min-height: 90px; display: block; width: 90px; } } p { text-align: center; font-size: 12px; display: block; color: #000; } } .desc { display: none; } } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .ui-slider-handle { top:.2em; height: 1.5em; .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } } } } .jspDrag { background: @mainColor; position: relative; cursor: pointer; display: block; height: 5px; width: auto; .radius; left: 0; top: 0; } .jspTrack { position:relative; background: #ccc; .radius; } .overview { margin-bottom: 30px; display: block; .lastNews { display: block; float: left; .readall { display: inline-block; margin-left: 15px; color: @mainColor; font-size: 12px; } .wrapper { margin-right: 10px; position: relative; display: block; height: 250px; width: 400px; float: left; .date { margin-bottom: 10px; display: block; height: 40px; .day { border: 1px solid #ccc; text-align: center; line-height: 38px; font-size: 24px; display: block; height: 38px; width: 38px; float: left; color: #000; } .month { background: @mainColor; padding: 7px 10px; margin-top: 5px; font-size: 16px; display: block; float: left; color: #fff; } } h3 { margin-bottom: 10px; font-weight: bold; font-size: 18px; color: #000; } p { margin-bottom: 10px; font-size: 14px; color: #000; } .readmore { position: absolute; color: @mainColor; font-size: 12px; display: block; bottom: -15px; left: 0; } } } .lastVideo { display: block; float: left; } } .print { background: url(../img/print.gif) left center no-repeat; padding: 3px 0 3px 25px; text-decoration: none; margin: 20px 0 0; font-size: 12px; display: block; color: #878787; float: right; } .breadcrumbs { margin: 20px 0 0; font-size: 12px; display: block; float: left; a { text-decoration: none; color: #878787; float: left; } a:hover { text-decoration: underline; } span { color: #878787; float: left; } p { display: inline-block; color: #878787; float: left; } } .ad { margin-left: 10px; display: block; float: right; } .ad * { margin-bottom: 20px; display: block; } .content { margin-bottom: 20px; display: block; width: 980px; float: left; h3 { margin-bottom: 20px; font-weight: bold; font-size: 24px; display: block; } a { color: @mainColor; } } .text, .seoText { margin-bottom: 20px; font-size: 14px; display: block; width: 980px; float: left; color: #000; h3 { margin-bottom: 20px; font-weight: bold; font-size: 24px; display: block; } p { margin-bottom: 10px; display: block; } iframe { margin: 20px 0; } a { color: @mainColor; } } .seoText { width: 100%; } .infoCard { .boxshadow(0px,0px,10px,-4px,0.8); margin-bottom: 20px; display: block; padding: 20px; width: 650px; .radius; p { font-family: Consolas; margin-bottom: 2px; font-size: 14px; display: block; color: #000; } } .newsPreview { border-bottom: 1px solid #ccc; margin-bottom: 20px; display: block; .img { margin-bottom: 5px; margin-right: 20px; overflow: hidden; display: block; height: 220px; width: 300px; float: left; img { min-height: 220px; min-width: 300px; max-width: 300px; display: block; } } .wrapper { display: block; width: 660px; float: left; h3 { margin-bottom: 20px; font-weight: bold; font-size: 24px; display: block; } p { margin-bottom: 10px; font-size: 14px; } .readmore { margin-bottom: 10px; color: @mainColor; font-size: 12px; display: block; } .info { margin-bottom: 5px; display: block; height: 22px; .category { background: url(../img/pin.png) left center no-repeat; padding: 5px 0 5px 30px; text-decoration: none; margin-right: 10px; color: @mainColor; font-size: 12px; float: left; } .commentary { background: url(../img/chat.png) left center no-repeat; padding: 5px 0 5px 30px; text-decoration: none; color: @mainColor; font-size: 12px; float: left; } } } } .showmore { border-bottom: 1px dashed @mainColor; display: inline-block; color: @mainColor; cursor: pointer; padding: 3px 0; margin: 20px 0; } .contacts { margin-bottom: 20px; display: block; p { margin-bottom: 5px; padding-left: 30px; font-size: 24px; } .phone { background: url(../img/phone_g.png) 3px center no-repeat; } .mail { background: url(../img/email_g.png) left 8px no-repeat; } } #map { margin-bottom: 20px; background: #f0f0f0; display: block; height: 340px; width: 770px; } .feedback { p { margin-bottom: 20px; margin-right: 20px; font-size: 24px; display: block; color: #000; float: left; span { color: #ccc; } } input[type=text], input[type=tel], input[type=email] { border: 1px solid #ccc; padding: 3px 10px; margin-top: 5px; font-size: 24px; display: block; width: 448px; .radius; } textarea { border: 1px solid #ccc; padding: 3px 10px; margin-top: 5px; font-size: 24px; display: block; height: 160px; width: 938px; resize: none; .radius; } input[name=send] { background: url(../img/send_msg.png) left top no-repeat; margin-right: 18px; cursor: pointer; display: block; height: 40px; width: 192px; float: right; border: 0; } input[name=send]:hover { background: url(../img/send_msg.png) left bottom no-repeat; } .regLink { color: @mainColor; margin-top: 10px; font-size: 18px; display: block; float: left; } } .search { display: inline-block; position: relative; margin-left: 5px; padding: 10px 0; input[type=text], input[type=search] { padding: 2px 22px 3px 5px; border: 1px solid #ccc; position: relative; color: @mainColor; background: #fff; font-size: 16px; display: block; outline: none; height: 24px; width: 451px; .radius; } input[type=submit] { background: url(../img/loop.png) 3px center no-repeat; position: absolute; cursor: pointer; display: block; height: 18px; width: 18px; color: #fff; right: 3px; border: 0; top: 13px; } } .cityIndex { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; display: block; .main { margin-bottom: 10px; display: block; p { margin-bottom: 5px; display: block; a { text-decoration: none; display: inline-block; font-weight: bold; color: @mainColor; font-size: 14px; } } } .list { -webkit-column-gap: 10px; -webkit-column-count: 4; -moz-column-gap: 10px; -moz-column-count: 4; column-gap: 10px; column-count: 4; display: block; ul { margin-bottom: 10px; display: block; p { margin-bottom: 5px; font-weight: bold; font-size: 24px; color: #000; } li { margin-bottom: 5px; display: block; a { text-decoration: none; display: inline-block; font-weight: bold; color: @mainColor; font-size: 14px; } } } } .active { a { text-decoration: underline!important; } } } .cityInfo { -webkit-column-gap: 30px; -webkit-column-count: 2; -moz-column-gap: 30px; -moz-column-count: 2; column-gap: 30px; column-count: 2; .wrapper { margin-bottom: 20px; display: block; p { margin-bottom: 5px; font-size: 14px; display: block; color: #000; } p:first-child { font-weight: bold; } } } .founded { text-decoration: underline; display: inline-block; margin-bottom: 50px; font-weight: bold; font-size: 28px; } .searchResult { border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 20px; h3 { margin-bottom: 20px; font-weight: bold; font-size: 24px; display: block; a { color: #000; } } p { margin-bottom: 5px; line-height: 16px; font-size: 14px; display: block; color: #000; } } .gallery { .wrapper { text-decoration: none; margin: 0 10px 30px 0; display: block; float: left; .img { margin-bottom: 10px; overflow: hidden; display: block; height: 140px; width: 180px; img { min-height: 140px; min-width: 180px; max-width: 180px; display: block; } } p { font-weight: bold; font-size: 14px; color: #000; } span { font-size: 12px; color: #000; } } } .album { .albumSlider { .wrap-img { margin-bottom: 10px; display: block; img { display: block; width: 100%; } } .scroll-pane { margin-bottom: 20px; overflow: auto; height: 100px; float: left; width: 100%; } .scroll-content { display: block; width: 100px; height: 90px; float: left; } .scroll-content-item { width: 90px; height: 90px; float: left; cursor: pointer; overflow: hidden; text-align: center; img { display: block; height: 90px; } } } h3 { margin-bottom: 5px; } .date { margin-bottom: 30px; font-size: 12px; display: block; } p { font-size: 14px; } } .leftmenu { margin: 0 8px 20px 0; display: block; width: 212px; float: left; .askQuestion { background: url(../img/ask_question.png) left top no-repeat; margin-bottom: 20px; cursor: pointer; display: block; height: 42px; width: 212px; } .askQuestion:hover { background: url(../img/ask_question.png) left bottom no-repeat; } ul { li { display: block; a { text-decoration: none; background: #fff; font-size: 16px; display: block; padding: 5px; color: #000; } ul { padding: 0 0 0 20px; display: none; li { a { background: #fff; } } } } li:hover, li.active { a { background: #d2e4dd; } ul { li { a { background: #fff; } } li:hover, li.active { a { background: #d2e4dd; } } } } li.active { ul { display: block; } } li.open { ul { display: block; } } li.open:hover { a { background: #fff; } a:hover { background: #d2e4dd; } ul { display: block; li:hover, li.active { a { background: #d2e4dd; } } } } } } .bar { margin-bottom: 20px; padding: 0 0 0 30px; .right { .catalogSearch { margin-right: 20px; position: relative; padding: 4px 0; display: block; float: left; input[type=text], input[type=search] { border: 2px solid @mainColor; padding: 3px 22px 3px 8px; position: relative; color: @mainColor; background: #fff; font-size: 16px; display: block; width: 350px; .radius; } input[type=submit] { background: url(../img/loop.png) 3px center no-repeat; background-size: contain; position: absolute; cursor: pointer; display: block; height: 18px; width: 18px; color: #fff; right: 3px; border: 0; top: 11px; } } .pricelist { background: url(../img/pricelist.png) left bottom no-repeat; display: block; height: 40px; width: 212px; float: left; } .pricelist:hover { background: url(../img/pricelist.png) left top no-repeat; } } .left { p { padding: 12px 0; display: block; float: left; } .list { background: url(../img/list.gif) left top no-repeat; margin: 11px 0 0 10px; cursor: pointer; display: block; height: 18px; width: 18px; float: left; } .list.active { background: url(../img/list.gif) left bottom no-repeat; cursor: default; } .tile { background: url(../img/tile.gif) left top no-repeat; margin: 11px 0 0 10px; cursor: pointer; display: block; height: 18px; width: 19px; float: left; } .tile.active { background: url(../img/tile.gif) left bottom no-repeat; cursor: default; } } } .tileWrapper { padding: 0 0 0 30px; display: block; .wrapper { text-decoration: none; margin: 0 50px 50px 0; text-align: center; position: relative; display: block; float: left; .img { margin-bottom: 20px; position: relative; overflow: hidden; display: block; height: 170px; width: 170px; .radius(50%); img { min-height: 170px; min-width: 170px; max-width: 170px; display: block; } .more { background: rgba(29,122,85,0.8); position: absolute; display: block; height: 170px; width: 170px; .transition; top: 100%; left: 0; span { background: url(../img/loop_plus.png) left center no-repeat; padding: 4px 0 4px 25px; margin: -10px -45px; position: absolute; display: block; color: #fff; left: 50%; top: 50%; } } } .img:hover { .more { top: 0; } } p { font-size: 16px; color: #000; } span { font-size: 12px; color: #8f8f8f; } p:hover, span:hover { text-decoration: underline; } .new, .bestseller { margin-left: -55px; position: absolute; display: block; height: 30px; width: 111px; left: 50%; top: -2px; } .new { background: url(../img/new.png) center no-repeat; } .bestseller { background: url(../img/bestseller.png) center no-repeat; } } .list { width: 100%; border: 0; td { vertical-align: middle; padding: 3px 10px; } td:nth-child(3) { text-align: center; } td:nth-child(4) { color: @secondaryColor; text-align: center; font-size: 14px; } .img { position: relative; overflow: hidden; display: block; .radius(50%); height: 60px; width: 60px; img { min-height: 60px; min-width: 60px; max-width: 60px; display: block; } .more { background: @mainColor url(../img/loop_plus.png) center no-repeat; position: absolute; display: block; opacity: 0.8; height: 60px; width: 60px; .transition; top: 100%; left: 0; } } .img:hover { .more { top: 0; } } a { text-decoration: none; font-size: 16px; display: block; color: #000; } a:hover { text-decoration: underline; } span { font-size: 12px; color: #8f8f8f; } .new, .bestseller { display: inline-block; padding: 5px 10px; font-size: 12px; color: #fff; .radius; } .new { background: @secondaryColor; } .bestseller { background: @mainColor; } } } .overlay { -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.5); box-shadow: 0 0 0 1000px rgba(0,0,0,0.5); margin: -300px -224px; background: #fff; position: fixed; display: none; padding: 20px; z-index: 200; width: 430px; .transition; left: 50%; top: 50%; .radius; .close { background: url(../img/close.png) left top no-repeat; position: absolute; cursor: pointer; display: block; height: 14px; width: 13px; right: 10px; top: 10px; } .close:hover { background: url(../img/close.png) right top no-repeat; } h3 { margin-bottom: 10px; font-weight: bold; color: @mainColor; font-size: 24px; } .feedback { p { margin-bottom: 10px; margin-right: 20px; font-size: 18px; display: block; color: #000; span { color: #ccc; } } input[type=text], input[type=tel], input[type=email], input[type=password] { border: 1px solid #ccc; padding: 3px 10px; margin-top: 5px; font-size: 16px; display: block; width: 408px; .radius; } textarea { border: 1px solid #ccc; padding: 3px 10px; margin-top: 5px; font-size: 16px; display: block; height: 160px; width: 408px; resize: none; .radius; } input[name=send] { background: url(../img/send_msg.png) left top no-repeat; margin-right: 0; cursor: pointer; display: block; height: 40px; width: 192px; float: right; border: 0; } input[name=send]:hover { background: url(../img/send_msg.png) left bottom no-repeat; } input[name=enter] { background: url(../img/signin.png) left top no-repeat; margin-right: 10px; cursor: pointer; display: block; opacity: 0.8; height: 40px; width: 160px; float: left; border: 0; } input[name=enter]:hover { opacity: 1; } input[name=reg] { background: url(../img/reg.png) left top no-repeat; margin-right: 10px; cursor: pointer; display: block; opacity: 0.8; height: 40px; width: 280px; float: left; border: 0; } input[name=reg]:hover { opacity: 1; } input[name=order] { background: url(../img/order.png) left top no-repeat; margin-right: 10px; cursor: pointer; display: block; height: 40px; width: 252px; float: left; border: 0; } input[name=order]:hover { background: url(../img/order.png) left bottom no-repeat; } input[name=pass] { background: url(../img/ch_pass.png) left top no-repeat; margin-right: 10px; cursor: pointer; display: block; height: 40px; width: 232px; float: left; border: 0; } input[name=pass]:hover { background: url(../img/ch_pass.png) left bottom no-repeat; } } .tabs { ul { padding: 5px 20px 7px; margin: 0 -20px 10px; background: #e8e8e8; position: relative; display: block; li { display: block; outline: none; float: left; a { border-bottom: 1px dashed #838383; text-decoration: none; display: block; color: #838383; outline: none; height: 16px; } } .ui-tabs-active { a { border-bottom: 1px dashed #e8e8e8; cursor: default; color: #000; } } .second { float: right; } .switch { background: url(../img/reg_switch_bg.png) left top no-repeat; position: absolute; margin: -5px -10px; cursor: pointer; display: block; height: 10px; width: 20px; left: 50%; top: 50%; .dot { background: url(../img/reg_switch_dot.png) left top no-repeat; position: absolute; display: block; .transition; height: 6px; width: 6px; left: 2px; top: 2px; } .dot.active { left: 12px; } } } } } .backBlock { margin-bottom: 20px; display: block; a { background: url(../img/back_arrow.png) left center no-repeat; padding: 2px 0 2px 15px; bottom: 0; text-decoration: none; font-size: 14px; color: #000; } a:hover { text-decoration: underline; } } .productCard { img { margin-right: 20px; display: block; width: 400px; float: left; } .left { width: 560px; .sale { color: @secondaryColor; font-size: 24px; display: block; width: 300px; float: right; } .price { margin-bottom: 20px; font-size: 54px; span { font-weight: 900; } } .manualsBlock { label { margin-bottom: 20px; font-size: 20px; display: block; color: #000; } input[name=tocart] { background: url(../img/to_cart.png) left top no-repeat; margin-right: 20px; cursor: pointer; display: block; outline: none; height: 40px; width: 182px; float: left; border: 0; } input[name=tocart]:hover { background: url(../img/to_cart.png) left bottom no-repeat; } input[name=tofavorits] { background: url(../img/to_favorites.png) left top no-repeat; cursor: pointer; display: block; outline: none; height: 40px; width: 202px; float: left; border: 0; } input[name=tofavorits]:hover { background: url(../img/to_favorites.png) left bottom no-repeat; } input[name=tocart].active { background: url(../img/in_cart.png) left top no-repeat; } input[name=tocart].active:hover { background: url(../img/in_cart.png) left bottom no-repeat; } input[name=tofavorits].active { background: url(../img/in_favorites.png) left top no-repeat; } input[name=tofavorits].active:hover { background: url(../img/in_favorites.png) left bottom no-repeat; } } } p { margin-bottom: 20px; } .tileWrapper { .wrapper { margin: 0 20px 30px 0; p { margin-bottom: 0; } } } .commentWrapper { h4 { margin-bottom: 10px; font-weight: bold; font-size: 14px; color: #000; } p { font-size: 14px; color: #636363; } .name { font-style: italic; text-align: right; font-size: 12px; display: block; color: #636363; } } .feedback { p { span { font-size: 11px; } } } } .quantity { border: 1px solid #8f8f8f; display: inline-block; margin-bottom: -12px; margin-left: 10px; background: #fff; padding: 0 3px; color: #000; .radius; .minus, .plus { margin-top: 9px; cursor: pointer; display: block; height: 16px; width: 16px; float: left; } .minus { background: url(../img/plus_minus.gif) left bottom no-repeat; } .minus:hover { background: url(../img/plus_minus.gif) right bottom no-repeat; } .plus { background: url(../img/plus_minus.gif) left top no-repeat; } .plus:hover { background: url(../img/plus_minus.gif) right top no-repeat; } input[name=val] { text-align: center; background: none; font-size: 24px; display: block; width: 42px; color: #000; float: left; border: 0; } } .signin, .reg { display: none; } .signin.active, .reg.active { display: block; } .cart { table { margin-bottom: 20px; thead { font-size: 24px; td, th { padding: 0 20px 20px 0; text-align: left; min-width: 75px; } .sort { cursor: pointer; span { background: url(../img/arrow_up.png) center no-repeat; margin-right: -11px; margin-left: 3px; display: none; height: 15px; width: 8px; } } .headerSortUp { span { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; } } .headerSortDown { span { display: inline-block; } } } td { vertical-align: middle; } .img { margin: 0 20px 5px 0; overflow: hidden; display: block; .radius(50%); height: 60px; width: 60px; float: left; img { min-height: 60px; min-width: 60px; max-width: 60px; display: block; } } .desc { width: 400px; .box { display: block; p { font-size: 16px; display: block; color: #000; } span { font-size: 12px; display: block; color: #ccc; } } } .price { font-size: 24px; } .quant { .quantity { margin: 0 30px; } } .cost { font-size: 24px; } .action { text-align: center; width: 20px; .deline { background: url(../img/close.png) left top no-repeat; display: block; height: 14px; width: 13px; } .deline:hover { background: url(../img/close.png) right top no-repeat; } } } .summary { margin-bottom: 10px; font-size: 24px; span { font-weight: bold; font-size: 34px; } } .order { background: url(../img/to_order.png) left top no-repeat; margin-bottom: 30px; cursor: pointer; display: block; height: 40px; width: 392px; } .order:hover { background: url(../img/to_order.png) left bottom no-repeat; } } .lkBox { margin-bottom: 30px; display: block; .chPass { background: url(../img/ch_pass.png) left top no-repeat; margin-bottom: 10px; cursor: pointer; display: block; height: 40px; width: 232px; } .chPass:hover { background: url(../img/ch_pass.png) left bottom no-repeat; } .consult { background: url(../img/consult.png) left top no-repeat; cursor: pointer; display: block; margin: 0 1px; height: 40px; width: 230px; } .consult:hover { background: url(../img/consult.png) left bottom no-repeat; } h3 { font-weight: normal; } .editBox { margin-right: 50px; position: relative; display: block; width: 200px; float: left; p { margin-bottom: 10px; font-weight: bold; .editBut { background: url(../img/edit.png) left top no-repeat; cursor: pointer; display: block; float: right; height: 10px; width: 10px; } .editBut:hover { background: url(../img/edit.png) right top no-repeat; } .editBut.active { display: none; } } .val { font-size: 18px; display: block; } input { border: 1px solid #ccc; position: absolute; margin: -6px -9px; background: #fff; padding: 2px 8px; font-size: 18px; display: none; .radius(20px); width: 155px; color: #000; z-index: 2; bottom: 0; left: 0; } .send { text-transform: uppercase; background: @mainColor; position: absolute; margin: -6px -8px; padding: 6px 7px; font-size: 18px; cursor: pointer; display: none; .radius(20px); width: 26px; color: #fff; z-index: 2; bottom: 0; right: 0; } } } .history { margin-bottom: 30px; display: block; table { width: 100%; tr { border-bottom: 1px solid #ccc; td:first-child { width: 20px; } td { text-align: center; font-size: 14px; padding: 15px; } } } } .favorites .tileWrapper .wrapper { margin: 0 20px 20px 0; } .description { margin-bottom: 20px; display: block; h4 { margin-bottom: 10px; font-weight: bold; font-size: 14px; display: block; } p { font-size: 12px; width: auto; } } #typeDisplay { margin: -160px 0 160px; display: block; width: 980px; height: 1px; float: left; } @media screen and (max-width:1230px) { .centerBlock { width: 980px; } #header { .phone{ margin: 16px 40px; } .mainmenu { ul { li { a { padding: 14px 7px; } } } } } .mainSlider { width: 980px; .scrollable { width: 980px; .items { .oneItem { img { width: 280px; } .text { width: 700px; } } } } } .infografics { height: 130px; .wrapper { margin: 0 25px; img { margin: 0 auto 10px; float: none; } p { text-align: center; } } } .bigInfo { font-size: 40px; span { font-size: 50px; } } #bodyMap { .infoBox { width: 420px; } } .overview { .lastNews { .wrapper { height: 180px; width: 590px; } .wrapper:nth-child(2) { display: none; } } } #footer { .subscribe { margin-bottom: -60px; width: 315px; float: none; .copyrights { position: absolute; text-align: right; bottom: 0; right: 0; } #region_logo { position: absolute; right: 0; top: 0; } } .soc { margin-right: 30px; margin-top: 60px; width: 315px; h3 { margin-bottom: 10px; } a { background-size: 800%; margin: 0 5px 0 0; height: 34px; width: 34px; } .rss { background-position: -34px top; } .twit { background-position: -68px top; } .you { background-position: -102px top; } .ok { background-position: -136px top; } .vk { background-position: -170px top; } .lj { background-position: -204px top; } .mail { background-position: -238px top; } } .links { margin-right: 20px; } } .text, .seoText, .content { width: 770px; } .newsPreview { .img { height: 200px; width: 250px; img { min-height: 200px; min-width: 250px; max-width: 250px; } } .wrapper { width: 500px; } } .leftmenu { width: 202px; } .bar .right .catalogSearch input[type=text], .bar .right .catalogSearch input[type=search] { width: 290px; } .productCard { img { margin-right: 10px; width: 230px; } .left { margin-bottom: 10px; width: 530px; .sale { width: 270px; } } .tileWrapper { margin-bottom: 20px; overflow: hidden; padding: 10px 0; height: 220px; } .feedback { textarea { width: 748px; } input[name=send] { margin-right: 0; } } } .favorites { .tileWrapper { padding: 0; } } #typeDisplay { width: 770px; } } @media screen and (max-width:1000px) { .centerBlock { width: 600px; } #header { .logo { background-size: cover; width: 37px; } .phone { margin: 16px 20px; overflow: hidden; height: 24px; width: 182px; } .mainmenu { .search { input[type=text], input[type=search] { font-size: 44px; height: 80px; width: 500px; } input[type=submit] { background-size: contain; height: 74px; width: 78px; } } ul { position: relative; margin-top: -1px; width: 100%; height: 0; li { display: none; } .mainmenuBut { display: block; } } ul.active { li { display: block; float: none; padding: 0; a { border-bottom: 1px solid #0D6642; background: @mainColor; font-size: 30px; padding: 20px 0; } ul { margin-bottom: 17px; position: relative; height: auto; z-index: 1; border: 0; li { border: 0; a { border: 1px solid #0D6642; margin: -1px 0 0 -1px; text-align: center; background: #fff; display: block; margin: 0; } a:hover { border-bottom: 1px solid #0D6642; } } } ul:before { background: url(../img/close.png) left top no-repeat; background-size: cover; text-indent: -9999px; text-align: center; position: absolute; cursor: pointer; display: none; content: '.'; height: 25px; width: 25px; color: #fff; right: 15px; top: -38px; } ul:before:hover { background: url(../img/close.png) right top no-repeat; } ul:after { display: none; } } } } } .mainSlider, .infografics, .products .wrapper:nth-child(n+10), #bodyMap { display: none; } .bigInfo { line-height: 25px; font-size: 22px; padding: 10px 0; span { font-size: 25px; } } .overview .lastVideo iframe { height: 370px; width: 600px; } #footer { height: 230px; .subscribe { margin-bottom: 0px; width: 200px; height: 0; form, h3 { display: none; } .copyrights { bottom: -50px; } #region_logo { bottom: -40px; right: auto; top: auto; left: 0; } } .soc { margin-right: 0; margin-top: 0; width: 315px; h3 { font-size: 26px; } a { margin: 0 10px 10px 0; height: 44px; width: 44px; } .rss { background-position: -44px top; } .twit { background-position: -88px top; } .you { background-position: -132px top; } .ok { background-position: -176px top; } .vk { background-position: -220px top; } .lj { background-position: -264px top; } .mail { background-position: -308px top; } } .links { display: none; } .contacts { float: right; h3 { font-size: 26px; } p { font-size: 20px; } } } .ad { display: none; } .text, .seoText, .content, .text iframe, .seoText iframe { width: 600px; } .infoCard { width: 558px; } .newsPreview { .img { height: 300px; width: 600px; img { min-height: 300px; min-width: 600px; max-width: 600px; } } .wrapper { width: 600px; } } .leftmenu { width: 600px; ul { background: @mainColor; -webkit-column-gap: 0px; -webkit-column-count: 2; -moz-column-gap: 0px; -moz-column-count: 2; column-gap: 0px; column-count: 2; li { border-right: 1px solid #0D6642; border-left: 1px solid #0D6642; a { background: @mainColor; word-wrap: break-word; font-size: 32px; padding: 10px; color: #fff; } } } } .tileWrapper .wrapper { margin: 0 20px 30px 0; } .bar { padding: 0; .right { .catalogSearch { margin-right: 8px; padding: 0; input[type=text], input[type=search] { padding: 7px 22px 7px 8px; font-size: 20px; height: 52px; width: 320px; } input[type=submit] { height: 28px; width: 28px; right: 9px; top: 13px; } } .pricelist { background-size: cover; height: 52px; width: 272px; } } .left { margin-top: 20px; p { font-size: 40px; } .list, .tile, .list.active, .tile.active { background-size: 100%; margin: 15px 0 0 30px; height: 42px; } .list { width: 42px; } .tile { width: 44px; } } } .tileWrapper { padding: 0; .list { tr { border: 2px solid #ccc; } td { position: relative; padding: 5px; a { font-size: 18px; } } td:nth-child(3) { width: auto; } td:nth-child(4) { vertical-align: top; } .new, .bestseller { position: absolute; right: -150px; bottom: 5px; } .new { margin-right: 10px; } } } .productCard { img { margin-bottom: 20px; width: 600px; } .feedback { textarea { width: 578px; } } } .cityIndex { .main { p { a { font-size: 20px; } } } .list { ul { p { margin-bottom: 10px; font-size: 30px; } li { margin-bottom: 10px; a { font-size: 20px; } } } } } #map, #map>ymaps { width: 600px!important; } .lkBox .editBox { margin-bottom: 20px; float: none; } .cart { table { td:first-child, th:first-child { min-width: 0; padding: 0; .img { display: none; } } .action { position: relative; .deline { position: absolute; left: -30px; } } } } #typeDisplay { width: 600px; } }