/* ========================================================================== Snippets ========================================================================== */ .gradient (@origin: left, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -o-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop); } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } .box-shadow-inset (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha); } .transition (@prop: all, @time: 1s, @ease: linear) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -o-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; } .opacity(@opacity: 0.5) { -moz-opacity: @opacity; -khtml-opacity: @opacity; -webkit-opacity: @opacity; opacity: @opacity; @opperc: @opacity * 100; -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; filter: ~"alpha(opacity=@{opperc})"; } .transition-delay(@time: 1s) { transition-delay: @time; -moz-transition-delay: @time; -webkit-transition-delay: @time; -o-transition-delay: @time; } /* ========================================================================== Helpers ========================================================================== */ .ul-reset { padding: 0; margin: 0; list-style: none; } .ul-inline { .group; .ul-reset; li { float: left; } } .group { &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } } .hide { display: none !important; } .overflow { overflow: hidden; } /* ========================================================================== Fonts ========================================================================== */ .ff-arial { font-family: Arial, Helvetica, Garuda, sans-serif; } .ff-georgia { font-family: Georgia, "Nimbus Roman No9 L", serif; } @font-face { font-family: 'pf_bulletin_sans_proregular'; src: url('/fonts/pfbulletinsanspro-regular-webfont.eot'); src: url('/fonts/pfbulletinsanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/pfbulletinsanspro-regular-webfont.woff') format('woff'), url('/fonts/pfbulletinsanspro-regular-webfont.ttf') format('truetype'), url('/fonts/pfbulletinsanspro-regular-webfont.svg#pf_bulletin_sans_proregular') format('svg'); font-weight: normal; font-style: normal; } .ff-bulletin-sans-reg { font-family: 'pf_bulletin_sans_proregular'; } @font-face { font-family: 'pf_bulletin_sans_prolight'; src: url('/fonts/pfbulletinsanspro-light-webfont.eot'); src: url('/fonts/pfbulletinsanspro-light-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/pfbulletinsanspro-light-webfont.woff') format('woff'), url('/fonts/pfbulletinsanspro-light-webfont.ttf') format('truetype'), url('/fonts/pfbulletinsanspro-light-webfont.svg#pf_bulletin_sans_prolight') format('svg'); font-weight: normal; font-style: normal; } .ff-bulletin-sans-light { font-family: 'pf_bulletin_sans_prolight'; } @font-face { font-family: 'pf_bulletin_sans_promedium'; src: url('/fonts/pfbulletinsanspro-medium-webfont.eot'); src: url('/fonts/pfbulletinsanspro-medium-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/pfbulletinsanspro-medium-webfont.woff') format('woff'), url('/fonts/pfbulletinsanspro-medium-webfont.ttf') format('truetype'), url('/fonts/pfbulletinsanspro-medium-webfont.svg#pf_bulletin_sans_promedium') format('svg'); font-weight: normal; font-style: normal; } .ff-bulletin-sans-medium { font-family: 'pf_bulletin_sans_promedium'; } @font-face { font-family: 'pf_bulletin_sans_probold'; src: url('/fonts/pfbulletinsanspro-bold-webfont.eot'); src: url('/fonts/pfbulletinsanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/pfbulletinsanspro-bold-webfont.woff') format('woff'), url('/fonts/pfbulletinsanspro-bold-webfont.ttf') format('truetype'), url('/fonts/pfbulletinsanspro-bold-webfont.svg#pf_bulletin_sans_probold') format('svg'); font-weight: normal; font-style: normal; } .ff-bulletin-sans-bold { font-family: 'pf_bulletin_sans_probold'; } /* ========================================================================== Global styles ========================================================================== */ html, body { width: 100%; height: 100%; } body { min-height: 100%; height: auto !important; height: 100%; position: relative; min-width: 1000px; background: #000; .ff-arial; } .wrap-out { width: 100%; position: relative; z-index: 200; } .wrap { width: 960px; margin: 0 auto; position: relative; z-index: 100; } h1 { margin: 0; padding: 0 0 0 0; font-weight: bold; font-size: 18px; line-height: 18px; color: #3e3e40; } h2 { margin: 0; padding: 0; .ff-bulletin-sans-bold; font-weight: normal; font-size: 18px; line-height: 18px; color: #3e3e40; } h3 { margin: 0; padding: 0; } p { padding: 0; margin: 0; } img { vertical-align: middle; } @link-color-1: #49f249; //@link-color-2: #006600; @link-color-2: #119911; @link-color-3: #ff6a00; a { outline: none !important; color: @link-color-1; text-decoration: none; &:hover { color: @link-color-3; } } .sprite { background-image: url(/img/sprite.png); background-repeat: no-repeat; } /* ========================================================================== Content ========================================================================== */ .content-wrapper { .wrap-out; overflow: hidden; min-width: 1000px; padding-bottom: 62px; } header { .wrap; height: 60px; z-index: 200; h1 { display: none; } .logo { float: left; display: block; } nav { float: right; margin-right: 100px; } .basket{ display:block; text-decoration:none; color: #F56723; float: right; position: absolute; top: 20px; right: -16px; font-size: 14px; background: url(/img/basket-top.png) no-repeat 0px 4px; width: 80px; height: 25px; padding: 5px 0 0 23px; sup{ color:#4AFD25; margin-left: 2px; } } } nav { height: 60px; .marker { position: relative; margin-right: 9px; &:after { content: ""; position: absolute; right: -13px; top: 6px; background: url(/img/nav-arrow.png) no-repeat 0 0; width: 8px; height: 5px; } } li:hover { .marker:after { background-position: 0 -5px; } } & > ul { height: 60px; .ul-inline; font-size: 13px; line-height: 66px; & > li { margin: 0 0 0 16px; position: relative; &:hover { & > a { color: @link-color-3; } } & > a:hover { color: @link-color-3; } } ul { .ul-reset; padding: 7px 0 9px; position: absolute; left: 50%; top: 50px; /*line-height: 24px;*/ line-height: 17px; width:129px !important; border: 1px solid #49f249; background: #000000; &:after { content: ""; background: url(/img/nav-sub-arrow.png) no-repeat 0 0; width: 10px; height: 6px; margin-left: -5px; position: absolute; top: -6px; left: 50%; } li { /*padding: 0 22px 0 13px;*/ padding: 0 13px; margin: 3px 0; } a { /*white-space: nowrap;*/ } } } &.on { & > ul { & > li:hover { ul { display: block; } } ul { display: none; } } } } .content { .wrap; p { font-size: 13px; line-height: 20px; color: #000000; .ff-arial; } } .bl-index-1 { .group; .wrap; .slider-index { float: left; } .contacts { float: right; } } .slider-index { position: relative; width: 720px; height: 290px; z-index: 100; .items { position: relative; width: 720px; height: 290px; z-index: 100; } .item { position: absolute; left: 0; top: 0; } img { position: relative; z-index: 100; } .text { position: absolute; left: -10px; bottom: 31px; background: rgba(73, 242, 73, 0.78); z-index: 200; .ff-bulletin-sans-light; font-size: 24px; line-height: 36px; text-transform: uppercase; color: #000000; letter-spacing: 3px; padding: 13px 16px 8px 30px; } .nav { position: absolute; z-index: 200; top: 24px; right: 20px; ul { .ul-inline; } li { margin: 0 0 0 5px; } a { width: 15px; height: 17px; display: block; .sprite; background-position: -20px 0; cursor: pointer; } .current a { background-position: 0 0; } } } .contacts { width: 240px - 12px - 67px; height: 290px - 12px - 47px; border: 6px solid #49f249; padding: 47px 0 0 67px; color: #ffffff; .ff-bulletin-sans-medium; font-size: 20px; p { margin: 0 0 4px 0; &:first-child { margin: 0 0 9px 0; position: relative; &:before { content: ""; width: 20px; height: 30px; .sprite; background-position: -35px 0; position: absolute; left: -36px; top: 4px; } } } span { display: block; .ff-arial; font-size: 13px; line-height: 15px; margin: -3px 0 0 0; } font{color:#626262;} .email { .ff-arial; font-weight: bold; font-size: 13px; line-height: 15px; margin-top: 45px; a { position: relative; &:before { content: ""; width: 24px; height: 18px; .sprite; background-position: -55px 0; position: absolute; left: -38px; top: -1px; } } } } .bl-index-2 { .wrap; .wrapper { display: table; width: 100%; margin-left: 20px; div { display: table-cell; height: 93px; vertical-align: middle; text-align: center; color: #ffffff; font-size: 18px; padding-right: 27px; .ff-bulletin-sans-bold; } span { display: inline-block; background-position: left top; background-repeat: no-repeat; &:hover { background-position: left bottom; } &.img-1 { width: 174px; height: 28px; background-image: url(/img/manufacturers/te-ra.png); } &.img-2 { width: 83px; height: 28px; background-image: url(/img/manufacturers/mindray.png); } &.img-3 { width: 80px; height: 20px; background-image: url(/img/manufacturers/lojer.png); } &.img-4 { width: 110px; height: 28px; background-image: url(/img/manufacturers/h+h.png); } &.img-5 { width: 109px; height: 23px; background-image: url(/img/manufacturers/comete.png); } &.img-6 { width: 132px; height: 26px; background-image: url(/img/manufacturers/vernipoll.png); } &.img-7 { width: 67px; height: 23px; background-image: url(/img/manufacturers/mey.png); } } } } .bl-index-3 { .wrap; .group; background: #ffffff; .row { float: left; } .row-1 { width: 480px; background: #ffffff; .item-1 { padding: 25px 9px 0 19px; /*height: 175px - 25px;*/ height: 215px - 25px; h2 { margin: 0 0 22px 0; span { position: relative; &:after { content: ""; background: url(/img/logo-mini.png) no-repeat 0 0; width: 114px; height: 26px; position: absolute; right: -150px; top: -4px; } } } } .item-2 { .group; a { display: block; float: left; } } .item-3 { padding: 39px 9px 0px 19px; height: 242px - 29px; h2 { margin: 0 0 22px 0; } p { margin: 0 0 5px 0; } } .item-4 { .group; background: url(/img/index-shadow-1.png) no-repeat 0 0; //height: 541px; width: 100%; } } .row-2 { width: 228px; border: 6px solid #49f249; /*height: 1038px - 12px;*/ position: relative; background: #000000; /*padding-bottom: 140px;*/ padding-bottom: 18px; h2 { color: #ffffff; padding: 19px 0 0 19px; margin: 0 0 31px 0; } .form-search { margin: 0 0 40px 20px; } ul { .ul-reset; font-size: 13px; line-height: 15px; padding: 0 0 0 35px; li { margin: 0 0 25px 0; } a { position: relative; &:before { content: ""; width: 4px; height: 6px; .sprite; background-position: -55px -18px; position: absolute; left: -15px; top: 3px; } } } .links-holder { text-align: center; width: 100%; /*position: absolute;*/ margin: 100px 0 20px 0; left: 0; bottom: 37px; a { display: inline-block; font-size: 13px; line-height: 15px; margin: 0 17px; position: relative; } .download:before { content: ""; width: 48px; height: 56px; .sprite; background-position: -79px 0; position: absolute; left: -5px; top: -61px; } .gallery:before { content: ""; width: 55px; height: 47px; .sprite; background-position: -127px 0; position: absolute; left: -2px; top: -57px; } } } .row-3 { width: 240px; background: #ffffff; .item-1 { padding: 24px 0 0 20px; height: 266px - 24px; margin-bottom: 25px; h2 { margin: 0 0 25px 0; } ul { .ul-reset; font-size: 13px; line-height: 15px; color: @link-color-2; } li { margin: 0 0 10px 0; } a { color: @link-color-2; &:hover { color: @link-color-3; } } } .item-2 { padding: 27px 0 0 20px; height: 231px - 27px; background: url(/img/index-shadow-2.png) no-repeat 0 0; margin-bottom: 25px; h2 { margin: 0 0 25px 0; } ul { .ul-reset; font-size: 13px; line-height: 15px; color: @link-color-2; } li { margin: 0 0 10px 0; } a { color: @link-color-2; &:hover { color: @link-color-3; } } } .item-3, .item-4 { a { display: block; width: 240px; height: 270px; position: relative; &:after { content: ""; background: url(/img/index-shadow-3.png) no-repeat 0 0; width: 240px; height: 26px; position: absolute; left: 0; top: 0; z-index: 200; } } img { display: block; position: relative; z-index: 100; } .flag { .ff-bulletin-sans-bold; font-size: 18px; line-height: 24px; color: #ffffff; background: #ff6a00; position: absolute; z-index: 200; right: -10px; top: 17px; padding: 0 19px 0 30px; } p { width: 226px - 41px - 33px; border: 1px solid #9e9e9f; margin: 6px auto 0; height: 96px - 16px; padding: 16px 33px 0 41px; } } } } .btn-orange { display: inline-block; border: 2px solid #ff6a00; font-size: 13px; line-height: 26px; padding: 0 17px 0 18px; color: #000000; } .new-items { width: 240px; float: left; position: relative; h2 { margin: 0 0 12px 0; padding: 26px 0 0 19px; } h3 { color: @link-color-2; font-size: 13px; line-height: 18px; } p { color: #000; font-size: 13px; line-height: 18px; } .switch-item { a { .group; display: block; padding: 13px 0 17px 20px; position:relative; & + a { background: url(/img/new-items-separator.png) no-repeat 0 0; } &:hover { h3 { color: @link-color-3; } } } } .img-holder { float: left; width: 60px; margin: 17px 17px 0 0; } .text { float: left; width: 130px; } .nav { position: absolute; z-index: 200; top: 26px; right: 20px; ul { .ul-inline; } li { margin: 0 0 0 5px; } a { width: 15px; height: 17px; display: block; .sprite; background-position: -20px -17px; cursor: pointer; } .current a { background-position: 0px -17px; } } } .news-block { width: 240px; float: left; position: relative; h2 { margin: 0 0 24px 0; padding: 26px 0 0 28px; } p { color: @link-color-2; font-size: 13px; line-height: 19px; padding: 0px 16px 0px 28px; } .switch-item { /*height: 416px;*/ padding-bottom: 20px; a { .group; display: block; margin: 0 0 22px 0; &:hover { p { color: @link-color-3; } } } time { text-align: center; color: #caced8; font-size: 13px; line-height: 19px; display: block; margin: 0 0 -3px 0; text-indent: 18px; } } .nav { position: absolute; z-index: 200; top: 26px; right: 20px; ul { .ul-inline; } li { margin: 0 0 0 5px; } a { width: 15px; height: 17px; display: block; .sprite; background-position: -20px -17px; cursor: pointer; } .current a { background-position: 0px -17px; } } .btn-orange { width: 196px; padding: 0; text-align: center; margin: 0 auto 25px; display: block; } } .form-search { input { width: 188px; height: 30px; text-indent: 10px; padding: 0; margin: 0; font-size: 13px; line-height: 30px; background: #ffffff; border: none; .ff-arial; outline: none; .box-shadow-inset(0,2px,5px,0.33); } } .bg-sprite-3 { content: ""; position: absolute; width: 68px; background: url(/img/sprite-3.png) no-repeat 0 0; } .bl-index-4 { background: #ffffff url(/img/index-shadow-4.png) no-repeat right 0; .wrap; h2 { padding: 46px 0 21px 118px; } .block-2 { li { padding: 0 58px 0 80px; } } ul { .ul-reset; float: left; width: 50%; } li { padding: 0 25px 0 118px; margin: 0 0 14px 0; position: relative; font-size: 13px; line-height: 20px; } .item-1:before { .bg-sprite-3; height: 38px; left: 56px; top: 2px; background-position: 0 0; } .item-2:before { .bg-sprite-3; height: 48px; left: 40px; top: -16px; background-position: 0 -38px; } .item-3:before { .bg-sprite-3; height: 29px; left: 55px; top: 10px; background-position: 0 -86px; } .item-4:before { .bg-sprite-3; height: 48px; left: 48px; top: -14px; background-position: 0 -115px; } .item-5:before { .bg-sprite-3; height: 46px; left: 19px; top: 2px; background-position: 0 -163px; } .item-6:before { .bg-sprite-3; height: 56px; left: 23px; top: 2px; background-position: 0 -209px; } .item-7:before { .bg-sprite-3; height: 35px; left: 17px; top: -4px; background-position: 0 -265px; } .item-8:before { .bg-sprite-3; height: 53px; left: 13px; top: 1px; background-position: 0 -300px; } p { font-size: 13px; line-height: 20px; padding: 43px 0 43px 96px; margin: 29px 0 0 0; background: url(/img/index-shadow-5.png) no-repeat 0 0; } } footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 62px; background: #000000; z-index: 300; .item-1 { font-size: 13px; line-height: 62px; float: left; margin: 0 0 0 20px; color: #ffffff; .opacity(0.5); } .item-2 { font-size: 13px; line-height: 62px; float: left; margin: 0 0 0 76px; color: #35f235; .opacity(0.5); } .item-3 { font-size: 13px; line-height: 62px; float: right; margin: 0 90px 0 0; color: #ffffff; .opacity(0.5); a { color: #ffffff; position: relative; &:after { content: ""; position: absolute; background: url(/img/webit.png) no-repeat 0 0; width: 80px; height: 24px; right: -80px; top: -5px; } } } } .items-catalog { width: 240px; position: relative; background: #000000; padding-top: 16px; h2 { color: #ffffff; padding: 19px 0 0 19px; margin: 0 0 25px 0; } .form-search { margin: 0 0 0 20px; input { width: 200px; } } ul { .ul-reset; font-size: 13px; line-height: 15px; padding: 15px 15px 0 0; li { margin: 0 0 30px 0; padding: 0 0 0 35px; &:first-child { padding-top: 16px; } } .current a { color: @link-color-3; cursor: default; &:before { background: url(/img/catalog-selected.png) no-repeat 0 0; width: 22px; height: 42px; content: ""; position: absolute; left: -35px; top: -12px; } } a { position: relative; &:before { content: ""; width: 4px; height: 6px; .sprite; background-position: -55px -18px; position: absolute; left: -13px; top: 5px; } } } .links-holder { text-align: center; width: 100%; padding: 74px 0 0 0; a { display: inline-block; font-size: 13px; line-height: 15px; margin: 0 17px; position: relative; } .download:before { content: ""; width: 48px; height: 56px; .sprite; background-position: -79px 0; position: absolute; left: -5px; top: -61px; } .gallery:before { content: ""; width: 55px; height: 47px; .sprite; background-position: -127px 0; position: absolute; left: -2px; top: -57px; } } } .content { .group; position: relative; &:before { content: ""; background: url(/img/content-shadow.png) repeat-y 0 0; position: absolute; right: -14px; top: 0; width: 14px; height: 100%; } aside { float: right; } .contacts { p { color: #ffffff; .ff-bulletin-sans-medium; font-size: 20px; white-space: nowrap; } .email { .ff-arial; font-weight: bold; font-size: 13px; line-height: 15px; margin-top: 45px; } } .main { width: 720px; background: #ffffff; float: left; min-height: 816px; .description{ ul { .ul-reset; margin-bottom: 24px; li { font-size: 13px; line-height: 18px; margin: 0 0 7px 19px; padding: 0; position: relative; color: #000; &:before { content: ""; position: absolute; left: -14px; top: 9px; width: 4px; height: 4px; background: #7a859a; .border-radius(50%); } } } ol { padding: 0; margin-bottom: 24px; li { font-weight: bold; color: #7a859a; margin: 0 0 7px 19px; font-size: 13px; line-height: 18px; span { font-weight: normal; color: #000; } } } } } } .breadcrumbs { /*height: 48px; height: 31px;*/ background: url(/img/breadcrumbs.png) no-repeat 0 bottom; padding: 0 0 1px 21px; ul { .ul-inline; font-size: 13px; /*line-height: 48px;*/ margin: 17px 0 16px; } li { color: @link-color-2; margin: 0 17px 0 0; float:none !important; display: inline; } a { color: @link-color-2; position: relative; &:after { content: "/"; position: absolute; right: -12px; /*top: -15px;*/ top:0; color: #b3bed5; } &:hover { color: @link-color-3; } } } .main { article { padding: 27px 22px 21px 22px; font-size: 13px; line-height: 20px; h1, h2 { margin: 0 0 21px 0; } h3 { font-size: 13px; padding: 23px 0 11px 0; } ul { .ul-reset; font-size: 13px; line-height: 20px; margin: 0 0 22px 0; li { padding: 0 0 0 8px; margin: 0 0 8px 0; position: relative; &:before { /*content: "•";*/ position: absolute; left: 1px; top: 1px; } } } } section { background: url(/img/row-shadow.png) right top no-repeat; position: relative; & + section { background: url(/img/section-shadow.png) no-repeat 0 0; } } .row { width: 360px; float: left; & + .row { width: 350px; padding: 0 0 0 10px; &:before { content: ""; background: url(/img/row-shadow-2.png) repeat-y 0 0; width: 10px; height: 100%; position: absolute; left: 50%; top: 0; } } } } .article-gallery { .group; a { display: block; float: left; } } article.honor { h2 { margin-bottom: 8px; } p { width: 400px; } .btn-orange { position: absolute; right: 37px; top: 48px; width: 163px; padding: 0; text-align: center; } } .gallery-titled { .group; a { float: left; display: block; position: relative; color: @link-color-2; img { position: relative; z-index: 100; } div { position: absolute; z-index: 200; left: 0; bottom: 0; background: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 16px; padding: 10px 0 9px 21px; width: 360px - 21px; } &:hover { color: @link-color-3; } } } .logos { p { margin: 0 0 16px 0; } } .news-one-layout { .title { .group; position: relative; &:before { content: ""; background: url(/img/news-one-shadow.png) no-repeat 0 0; width: 530px; height: 7px; position: absolute; left: 0; top: 100%; } img { float: right; } time { font-size: 13px; color: #caced8; display: block; margin: 0 0 15px 0; } div { float: left; width: 200px; margin: 0 0 0 19px; padding: 16px 0 0 0; } } .text { padding: 20px 21px 20px; color: #000000; font-family: Arial,Helvetica,Garuda,sans-serif; font-size: 13px; line-height: 20px; p { margin: 0 0 7px 0; } .btn-orange-triangle { margin-top: 28px; } } } .btn-orange-triangle { display: inline-block; border: 3px solid #ff6a00; border-left: none; font-size: 13px; line-height: 25px; padding: 0 19px; color: #000000; position: relative; margin: 0 0 0 9px; &:after { content: ""; background: url(/img/arrow-orange.png); width: 11px; height: 31px; position: absolute; left: -11px; top: -3px; } } /* basic scrollbar styling */ /* vertical scrollbar */ .mCSB_container{ width:auto; margin-right:30px; overflow:hidden; } .mCSB_container.mCS_no_scrollbar{ margin-right:0; } .mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar, .mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{ margin-right:30px; } .mCustomScrollBox>.mCSB_scrollTools{ width:16px; height:100%; top:0; right:0; } .mCSB_scrollTools .mCSB_draggerContainer{ position:absolute; top:0; left:0; bottom:0; right:0; height:auto; } .mCSB_scrollTools a+.mCSB_draggerContainer{ margin:20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width:2px; height:100%; margin:0 auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_scrollTools .mCSB_dragger{ cursor:pointer; width:100%; height:30px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:16px; height:100%; margin:0 auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-align:center; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display:block; position:relative; height:20px; overflow:hidden; margin:0 auto; cursor:pointer; } .mCSB_scrollTools .mCSB_buttonDown{ top:100%; margin-top:-40px; } /* horizontal scrollbar */ .mCSB_horizontal>.mCSB_container{ height:auto; margin-right:0; margin-bottom:30px; overflow:hidden; } .mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{ margin-bottom:0; } .mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar, .mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{ margin-right:0; margin-bottom:30px; } .mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{ width:100%; height:16px; top:auto; right:auto; bottom:0; left:0; overflow:hidden; } .mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{ margin:0 20px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:2px; margin:7px 0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{ width:30px; height:100%; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:4px; margin:6px auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{ display:block; position:relative; width:20px; height:100%; overflow:hidden; margin:0 auto; cursor:pointer; float:left; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{ margin-left:-40px; float:right; } .mCustomScrollBox{ -ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/ } /* default scrollbar colors and backgrounds (default theme) */ .mCustomScrollBox>.mCSB_scrollTools{ opacity:0.75; filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ } .mCustomScrollBox:hover>.mCSB_scrollTools{ opacity:1; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */ } .mCSB_scrollTools .mCSB_draggerRail{ background:#333333; /* rgba fallback */ } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:#666666 url(/img/scroll-dragger.png) no-repeat 50% 50%; /* rgba fallback */ } .news-all-layout { .group; padding-bottom: 15px; h1 { width: 100%; float: left; text-indent: 21px; padding: 23px 0 20px; } .col { width: 206px; float: left; margin: 0 10px 0 20px; font-size: 13px; line-height: 18px; } article { padding: 0 0 17px 0; position: relative; margin: 0 0 22px 0; &:after { width: 100%; height: 1px; background: #d1d1d1; position: absolute; left: 0; bottom: 0; content: ""; } &:last-child { &:after { content: none; } } a { color: @link-color-2; h2 { color: @link-color-2; } &:hover { color: @link-color-3; h2 { color: @link-color-3; } } } h2 { .ff-arial; font-weight: bold; font-size: 13px; line-height: 18px; margin: 0 0 7px 0; } p { font-size: 13px; line-height: 18px; padding: 0 0 7px 0; } } img { display: block; margin: 0 0 10px 0; } time { font-size: 13px; line-height: 19px; color: #d5d8e0; display: block; margin: 0 0 5px 0; } } .filters-radio { h2 { color: #ffffff; padding: 25px 0 0 19px; margin: 0 0 16px 0; } ul { .ul-reset; padding: 0 0 0 29px; } li { margin: 0 0 13px 0; } .current a { background: #49f249; color: #000000; position: relative; &:before { content: ""; position: absolute; background: url(/img/filter-arrow.png) 0 0 no-repeat; width: 10px; height: 31px; left: -10px; top: 0; } } a { display: inline-block; line-height: 31px; padding: 0 12px 0 6px; font-size: 18px; } } .catalog-layout { padding: 46px 20px 0; .item { display: table-cell; text-align: center; vertical-align: top; padding: 0 8px 57px; width: 210px; } .block { display: table-row; } .title { display: inline-block; font-size: 13px; /*line-height: 35px; white-space: nowrap;*/ border: 3px solid #dadada; padding: 10px 15px; color: @link-color-2; position: relative; margin-bottom: 22px; &:after { content: ""; position: absolute; left: 50%; bottom: -10px; background: url(/img/catalog-arrow.png) no-repeat 0 0; width: 20px; height: 10px; margin-left: -10px; } sup { color: #000000; margin: 0 0 0 5px; } } a { color: #119911; display: block; width: 200px; img { border: 3px solid #fff; margin: -3px; } &:hover { .title { color: #ffffff; background-color: #fe6a00; border-color: #fe6a00; &:after { background-position: 0 -10px; } } img { border: 3px solid #fe6a00; margin: -3px; } } } } .catalog-text { padding: 31px 50px 30px 20px; background: url(/img/catalog-text-shadow.png) no-repeat 0 0; p { font-size: 13px; line-height: 20px; margin: 0 0 13px 0; } } .user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .checkbox { input { .opacity(0); display: inline-block; padding: 0; margin: 0; width: 17px; height: 17px; margin-right: 4px; .user-select-none; & + span { position: relative; display: inline-block; .user-select-none; cursor: pointer; &:before { content: ""; background: url(/img/checkbox.png); width: 17px; height: 17px; position: absolute; left: -25px; top: -1px; background-position: 0 0; } } &:checked + span { &:before { background-position: 0 -48px; } } } } .catalog-filter { &.close { .switch:after { background-position: 0 bottom; bottom: 8px; } } .switch { display: block; background: url(/img/catalog-filter-figure.png) no-repeat 0 0; width: 720px; height: 19px; cursor: pointer; position: relative; top: 25px; .filter_caption { color: #000000; display: block; font-size: 11px; position: relative; text-align: center; top: -20px; } &:after { content: ""; position: absolute; left: 50%; bottom: 11px; background: url(/img/catalog-filter-arrow.png) no-repeat 0 0; width: 15px; height: 9px; margin-left: -7px; } } .inner { overflow: hidden; height: 100%; } .col { float: left; padding: 28px 0 0 30px; & + .col { margin-left: 42px; } h2 { margin: 0 0 7px 0; color: #000000; } .item { padding: 0 0 0 0; margin: 0 0 2px 0; .checkbox; } label { font-size: 12px; line-height: 17px; } } .options { padding-bottom: 11px; .group; ul { .ul-inline; float: left; margin-left: 30px; li { margin: 0 1px 0 0; } input { font-size: 14px; height: 30px; display: inline-block; color: #000000; padding: 0 13px; border:none; } .current { input { color: #ffffff; background-color: #fe6a00; } } } .refresh { float: right; margin-right: 75px; font-size: 13px; line-height: 30px; color: #000000; background: url(/img/underline-dotted.png) repeat-x 0 23px; &:hover { color: #fe6a00; background: none; } cursor: pointer; } } } .card-layout { h1 { padding: 29px 0 30px 20px; } .col { float: left; } .col-1 { width: 480px; position: relative; z-index: 100; } .col-2 { width: 240px; position: relative; z-index: 200; } .wrapper { position: relative; z-index: 100; &:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; background: url(/img/card-shadow-1.png) repeat-x 0 0; height: 10px; z-index: 200; } } .cols { .group; position: relative; z-index: 100; &:before { content: ""; position: absolute; right: 240px; top: 0; width: 10px; background: url(/img/card-shadow-2.png) repeat-y 0 0; height: 100%; z-index: 200; } } .card-slider { .title { position: absolute; top: 21px; left: -10px; background: #ff6a00; font-size: 18px; line-height: 24px; .ff-bulletin-sans-bold; color: #ffffff; padding: 0 19px 0 30px; } .img-big { width: 480px; height: 342px; overflow: hidden; text-align: center; vertical-align: middle; display: table-cell; img { margin:auto 0; } } .bx-pager { display: none; } &.wrapper-no-margin { .bx-wrapper { margin: 0; } } .bx-wrapper { width: 432px; margin: 0 0 0 18px; position: relative; li { text-align: center; } } .bx-prev { position: absolute; left: -28px; top: 0; display: block; width: 28px; height: 75px; cursor: pointer; background: url(/img/sprite.png) no-repeat -182px 0; .user-select-none; text-indent: -9999px; &:hover { background-position: -182px -75px; } } .bx-next { position: absolute; top: 0; right: -28px; display: block; width: 28px; height: 75px; cursor: pointer; background: url(/img/sprite.png) no-repeat -210px 0; .user-select-none; text-indent: -9999px; &:hover { background-position: -210px -75px; } } ul { height: 75px; margin: 0; a { display: block; width: 108px; height: 75px; position: relative; z-index: 100; } li { &:hover { cursor: pointer; &:after { position: absolute; z-index: 200; width: 108px - 4px; height: 75px - 4px; border: 2px solid #49f249; left: 0; top: 0; content: ""; } } &.current { cursor: default; &:after { position: absolute; z-index: 200; width: 108px - 4px; height: 75px - 4px; border: 2px solid #49f249; left: 0; top: 0; content: ""; } } } } } .description { padding: 36px 21px 25px 21px; h2 { margin: 0 0 23px 0; } p { margin: 0 0 14px 0; } } .links-holder { background: url(/img/links-holder-shadow.png) no-repeat 0 0; padding: 30px 0 27px 21px; .group; h2 { font-weight: normal; .ff-bulletin-sans-reg; font-size: 17px; line-height: 17px; margin: 0 0 24px 0; } a { color: @link-color-2; font-size: 13px; line-height: 20px; position: relative; &:hover { color: @link-color-3; } &.pdf { &:before { content: ""; background: url(/img/sprite.png) -238px 0 no-repeat; width: 22px; height: 27px; position: absolute; left: -34px; top: 1px; } } } .col { display: inline-block; margin: 0 12px 15px 34px; width: 185px; & + .col { margin-right: 0; } } } .color-select { padding: 23px 0 20px 19px; h2 { .ff-arial; font-size: 18px; line-height: 18px; font-weight: normal; margin: 0 0 26px 0; .models { display: block; padding-left: 78px; margin-top: -18px; } } .color-pick { margin: 0 0 0 50px; a { .ff-bulletin-sans-medium; font-size: 17px; line-height: 17px; color: #000000; display: inline; background: url(/img/underline-dotted.png) repeat-x 0 bottom; position: relative; &:hover { background: none; } &:before { content: ""; background: url(/img/icon-color-pick.png) no-repeat 0 0; width: 37px; height: 40px; position: absolute; left: -49px; top: -4px; } } } .color-list { .group; padding: 21px 0 0 0; a { display: block; width: 21px; height: 21px; float: left; margin: 9px 9px 0 0; position: relative; cursor:pointer; &>span { position: absolute; width: 120px; background: #edf0f2; left: 50%; bottom: 24px; margin-left: -63px; font-size: 13px; line-height: 22px; color: #000; padding: 2px 3px; display: none; text-align: center; span{ height: 122px; } &:after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #edf0f2; position: absolute; left: 50%; bottom: 0; margin: 0 0 -4px -5px; } } &:hover { /*border: 2px solid #fff; width: 21px - 4px; height: 21px - 4px;*/ span { display: block; } } } } } .tech { padding: 26px 0 21px 0; background: url(/img/card-shadow-aside.png) no-repeat 0 0; h2 { margin: 0 20px 7px; } p + h2 { margin-top: 20px; } p { line-height: 18px; margin: 0 20px; background: url(/img/underline-card.png) repeat 0 -8px; padding: 0 0 8px 0; strong { float: right; } img { float: right; margin: 0 10px 0 0; } } .no_bg { background:none; } a { color: #119911; } } .new-items { background: url(/img/card-shadow-aside.png) no-repeat 0 0; h2 { padding: 50px 0 0 19px; } .switch-item { a { padding-left: 0; margin: 0 20px; } } .text { width: 120px; } } } .nav-switch { /*overflow: hidden;*/ } .switch-item { position: relative; } .shadow-after { position: relative; &:before { content: ""; background: url(/img/text-base-shadow-after.png) repeat-x 0 0; width: 100%; height: 10px; position: absolute; left: 0; top: 100%; } } article.base-text, .description { padding-bottom: 28px; article { padding: 0; & + article { padding-top: 26px; } } h2 { font-weight: normal; .ff-bulletin-sans-reg; color: #000000; font-size: 18px; line-height: 15px; } p { margin-bottom: 13px; } a { color: @link-color-2; &:hover { color: @link-color-3; } } img { float: left; margin: 6px 26px 0 0; } .catalog-layout img { float: none; margin:0; } h3 { padding: 0; font-size: 13px; margin-bottom: 10px; } } article.section_desc { padding-left: 40px; padding-top: 0px !important; h1 { padding: 0 !important; } ul li:before { color: #7A859A; } ol { margin-left: 5px !important; } } .base-slider { width: 720px - 22px; padding: 0 0 0 22px; margin-bottom: 40px; h2 { color: #56b763; padding: 39px 0 39px 0; } ul { padding: 0; margin: 0; a { display: block; position: relative; &:hover { &:after { content: ""; border: 3px solid #49f34a; left: 0; top: 0; position: absolute; width: 222px - 6px; height: 148px - 6px; } } } } .bx-controls-direction { a { display: block; position: absolute; top: 0; cursor: pointer; z-index: 8040; visibility: visible; width: 32px; height: 148px; background: url(/img/slider-nav.png) no-repeat 0 0; text-indent: -9999px; } .bx-prev { left: -33px; background-position: 0 0 ; &:hover { background-position: 0 -148px; } } .bx-next { right: -31px; background-position: -32px 0 ; &:hover { background-position: -32px -148px; } } } .bx-pager { display: none; } .bx-wrapper { position: relative; } } blockquote { padding: 0; background: #ecf0f3; margin: 0; } .base-cols { .group; background: url(/img/base-cols-shadow.png) repeat-y 480px 0; .col { float: left; width: 480px; & + .col { width: 240px; } } } article { ul.base { .ul-reset; margin-bottom: 24px; li { font-size: 13px; line-height: 18px; margin: 0 0 7px 15px; padding: 0; position: relative; color: #000; &:before { content: ""; position: absolute; left: -14px; top: 9px; width: 4px; height: 4px; background: #7a859a; .border-radius(50%); } } } ol.base, ol { padding: 0; margin-bottom: 24px; li { font-weight: bold; color: #7a859a; margin: 0 0 7px 15px; font-size: 13px; line-height: 18px; span { font-weight: normal; color: #000; } } } } .base-form { width: 100%; .item { .group; margin: 0 0 16px 0; } label { display: block; .ff-arial; font-size: 13px; line-height: 20px; color: #000000; font-weight: bold; width: 100%; float: none; margin: 0 0 5px 0; } input[type="text"], input[type="search"] { height: 32px; width: 238px; text-indent: 10px; .ff-arial; font-size: 13px; line-height: 32px; color: #000000; outline: none; &.phone { width: 178px; } &.email { width: 217px; } } textarea { height: 99px - 12px; width: 299px - 20px; padding: 6px 10px; .ff-arial; font-size: 13px; line-height: 20px; color: #000000; outline: none; resize: none; } input[type="text"], textarea, input[type="search"] { float: left; background: #ffffff; border: 1px solid #c2c5cc; -webkit-box-shadow: inset 1px 1px 1px #f0f0f2; -moz-box-shadow: inset 1px 1px 1px #f0f0f2; box-shadow: inset 1px 1px 1px #f0f0f2; &:focus { border-color: #7ecef4; -webkit-box-shadow: 0 0 2px rgba(126, 206, 244, 0.4); -moz-box-shadow: 0 0 2px rgba(126, 206, 244, 0.4); box-shadow: 0 0 2px rgba(126, 206, 244, 0.4); } &.error { border-color: #f24965; -webkit-box-shadow: 0 0 2px rgba(242, 73, 101, 0.2); -moz-box-shadow: 0 0 2px rgba(242, 73, 101, 0.2); box-shadow: 0 0 2px rgba(242, 73, 101, 0.2); } } div.error { float: left; width: 120px; padding: 5px 0 0 14px; .ff-arial; font-size: 13px; line-height: 15px; color: #f24965; } .tip { float: left; width: 120px; padding: 10px 0 0 14px; .ff-arial; font-style: italic; font-size: 13px; line-height: 15px; color: #000; .opacity(0.5); white-space: nowrap; } input[type="submit"] { border: none; height: 30px; padding: 0 30px; font-size: 13px; line-height: 30px; .ff-arial; color: #000000; background: #fff2cc; &:hover { background: #ffa666; } &:active { background: #a4f8a4; } } } #select(@width: 180px, @height: 29px) { height: @height; width: @width; overflow: hidden; border: none; background: #eaf0f4 url(/img/select.png) no-repeat right 0; text-indent: 16px; outline: none; select { height: @height; width:115%; margin: 0; outline: none; background-color: transparent; -webkit-appearance: none; padding: 4px 0 4px 16px; border: none; font-size: 13px; display: block; text-align: left; color: #000; cursor: pointer; } &:hover { background-position: right -29px; } } .radio { input { .opacity(0); display: inline-block; padding: 0; margin: 0; width: 17px; height: 17px; margin-right: 4px; .user-select-none; & + span { position: relative; display: inline-block; .user-select-none; cursor: pointer; &:before { content: ""; background: url(/img/radio.png); width: 17px; height: 17px; position: absolute; left: -25px; top: -1px; background-position: 0 0; } } &:checked + span { &:before { background-position: 0 -48px; } } } } .select-base { #select; } .base-checkbox, .base-radio { .ff-arial; font-size: 13px; .checkbox, .radio { margin-bottom: 6px; } } .base-table { width: 100%; margin: 10px 0; font-size: 13px; line-height: 20px; .ff-arial; th, td { border: 1px solid #ccd4dd; padding: 6px 12px; } th { text-align: left; background: #ecf0f3; } tr { &:hover { background: #ffa666; } } } .catalog-items-layout { h1 { padding: 45px 0 25px 40px; } .items-layout { .group; padding: 23px 0 23px 40px; article { display: inline-block; vertical-align: text-top; width: 190px; padding: 0; margin: 0 32px 32px 0; h2 { font-weight: normal; .ff-arial; font-size: 13px; line-height: 20px; color: @link-color-2; margin: 10px 0 0 0; } .price{ display:inline-block; color: #FE6D02; font-size: 18px; margin: 12px 0 0px; smal{ font-size:14px; } } a { &:hover { h2 { color: #ef6300; } img { border: 3px solid #ff6a00; margin: -3px; } } } } .goods_no { font-weight: bold; text-align: center; } } } .catalog-search { padding: 0 0 0 40px; form { .group; .base-form; width: 640px; input[type="search"] { width: 518px; } input[type="submit"] { height: 34px; width: 110px; float: right; } } .text { float: left; width: 100%; .opacity(0.5); font-size: 13px; line-height: 20px; margin: 5px 0 0 0; } } .pagi { text-align: center; padding: 0 20px; ul { .ul-reset; display: inline-block; .group; } li { float: left; margin: 0 2px; } a { display: block; padding: 0 6px; line-height: 22px; border: 2px solid #fff; color: #119911; &:hover { color: @link-color-3; } } .current { a { border-color: @link-color-3; color: #000000; cursor: default; } } .prev, .next { a { border: none; width: 26px; height: 26px; position: relative; cursor: pointer; padding: 0; &:after { content: ""; background-image: url(/img/pagi.png); background-repeat: no-repeat; position: absolute; width: 7px; height: 11px; left: 9px; top: 7px; } } } .prev { a { &:after { background-position: 0 0; } &:hover { &:after { background-position: 0 -11px; } } } } .next { a { &:after { background-position: -7px 0; } &:hover { &:after { background-position: -7px -11px; } } } } } .news_list { margin: 23px 0 20px 20px; } .logospng { height:90px; } .search_head { color:#222; font-family: 'pf_bulletin_sans_promedium'; margin-bottom: 10px; display: block; } .catalog-filter .group { margin-bottom: 15px; } .manuf_text { margin-left: 180px; } .object_h1 { padding: 27px 22px 21px; } .manuf_img { float: left; width: 175px; } .manuf_img img { margin-bottom: 20px !important; } .manuf_block { margin-bottom: 30px; min-height: 55px; } .production{ float: left; margin-top: 20px; width: 100%; } .without_img{ width:100% !important; margin-bottom:10px !important; } .counters{ float: left; text-align: center; width: 100%; overflow: hidden; width: 1px; height: 1px; } .counters img { width: 1px !important; height: 1px !important; } .mCustomScrollbar { min-height: 150px !important; } .pic404 { padding:45px 0 0 205px; } .text404 { padding:35px 0 0 160px; margin-bottom: 100px; } .search404{ display: block; margin-left: 300px; margin-top: -33px; } .card_note { font-size: 11px; color:#777; font-style: italic; margin: 0 21px 40px ; } .similar a p { color: #119911; margin-top: 15px; } .similar li a, .similar li a:hover, .similar li a:after { border: none !important; padding: 0 13px; } .similar_block { background: url("/img/similar.png") no-repeat top; } .similar_block h2 { padding: 25px 21px 36px; } .no_controls .bx-controls-direction { display: none; } .p-action{ margin-left: 3px; & h1{ font-size: 18px; padding: 23px 23px 30px; } &>div.item-4{ display: inline-block; vertical-align: top; box-shadow: 1px 0px 0px #FE6700; margin-left: -3px; width: 239px; border-bottom: 1px solid #FE6700; height: 350px; position: relative; & a{ & .flag{ background: #FE6700; color: #fff; text-transform: uppercase; position: relative; font-size: 14px; padding: 7px 20px 6px; box-shadow: 1px 0px 0px #FFAE77; &:after{ content: ''; position: absolute; width: 27px; height: 10px; background: url(/img/action-str-bot.jpg) no-repeat 0 0; bottom: -10px; left: 20px; } } & img{ display: block; max-width: 200px; max-height: 150px; height:150px; margin: 20px auto 5px; } & .descr{ padding: 10px 18px; line-height: 16px; & .price{ display: block; color: #F56523; font-size: 18px; font-weight: bold; margin-bottom: 7px; & font{padding:0;} } } & .href{ color: #299E0F; padding: 10px 18px; font-size: 12px; position: absolute; bottom: 0; &:hover{text-decoration:underline;} } } } } .shadow-pop{ display: none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; } .callback{ display: none; position: fixed; width: 196px; height: auto; background: #fff; z-index: 1000; box-shadow: 0 0 0px 6px #51FF36; left: 50%; margin-left: -135px; top: 50%; margin-top: -150px; padding: 35px 37px 40px; & .close{ position: absolute; width: 35px; height: 35px; background: url(/img/close4.png) no-repeat 0 0; top: -20px; right: -20px; cursor: pointer; } & .head-pop{ color: #3e3e40; font-size: 16px; font-weight: bold; margin-bottom: 15px; } & label{ position:relative; & input{ font-size: 13px; color:#000; padding: 4px 8px 3px; font-weight: bold; width: 178px; margin-bottom: 14px; border: 1px solid #989898; position:relative; &:focus{outline: none;} } &:before { content: ""; display: none; position: absolute; width: 13px; height: 10px; background-image: url(/img/ok-err.png); background-repeat: no-repeat; z-index: 99; right: 6px; top: 4px; } &.ok{ &:before{ display:block; background-position:0 0; } } &.err{ & input{border: 1px solid red;} &:before{ display:block; background-position:0 -10px; } & span{display:block;} } & span{ display:none; font-size: 13px; color: red; position: relative; top: -12px; } } & textarea { font-size: 13px; padding: 4px 8px 3px; width: 178px; margin-bottom: 14px; &:focus{outline: none;} } & .send{ background: #F86501; color: #fff; font-size: 18px; text-align: center; padding: 7px 0; cursor: pointer; &:hover{background: #DB5B04;} } } .contacts{ width: 195px; height: 190px; padding: 23px 0 23px 33px; & font{ padding-top: 4px; display: inline-block; } & p:first-child { margin: 0 0 6px 0; &:before {display:none;} } & .email{ margin: 27px 0 21px 26px; & a:before{ background-position: -20px -58px; left: -24px; top: 1px; } } } .span-red-call { color: #1DD800; display: block; font-size: 16px; padding: 0px 0px 8px 17px; display:none; } .callback-but{ color: #000; background: #49f249; margin: 0px 0 0 -34px; padding: 18px 0 16px 60px; font-size: 14px; text-transform: uppercase; font-family: arial; font-weight: bold; cursor: pointer; position: relative; &:before{ content: ''; display: block; position: absolute; width: 14px; height: 21px; background: url(/img/sprite.png) no-repeat 0 -54px; left: 37px; top: 16px; } } .cols-n .col-2 .color-select{ h2{ color:#000; strong{ font-weight:normal; } } .select{ .name{ display: inline-block; color: #000; background: #ECF0F3; padding: 8px 0 8px 10px; width: 200px; position:relative; &:after{ display:block; content:''; position:absolute; width:20px; height:20px; background:url(/bitrix/images/catalog/components/select-str.jpg) no-repeat 0 0; top:0; right:0; } } ul{ li{ color:#000; } } } } .cols-n { #color-select { .price{ color:#F66723; font-size:24px; margin: -10px 0 15px 0; smal{ font-size:18px; } } .color-pick{ margin: 0px 0 0 0px; span{ display:block; font-size: 16px; font-weight: bold; } } .color-list{ padding: 10px 0 0 0; &>span{ display:block; font-size: 13px; } } } .number{ font-size: 13px; font-weight: bold; padding: 14px 20px; border-top: 1px solid #D6D7E3; border-bottom: 1px solid #D6D7E3; input{ width: 32px; text-align: center; padding: 5px 0; margin: 0 10px; } } .cost{ padding: 19px 19px 12px; div{ color: #fff; background: #F66723; text-align: center; margin-bottom: 12px; padding: 8px 0; cursor: pointer; } } } .one-click{ display:none; position: fixed; width: 376px; height: auto; background: #fff; z-index: 1000; left: 50%; margin-left: -235px; top: 50%; margin-top: -225px; padding: 25px 37px 40px; font-weight:bold; box-shadow: 0 0 0px 6px #51FF36; .close{ position: absolute; width: 13px; height: 13px; background: url(/img/close5.png) no-repeat 0 0; top: 9px; right: 9px; cursor: pointer; } >span{ font-size:17px; display: inline-block; margin-bottom: 15px; } label{ display:block; font-size: 14px; input{ display:block; font-size: 13px; color: #000; padding: 9px 12px 7px; width: 355px; margin: 7px 0 17px; border: 1px solid #C1C3CB; position: relative; font-weight:normal; margin: 7px 0 17px; box-shadow: inset 1px 1px 0px 0 #F0EFF2; } span{ display: none; font-size: 13px; color: red; position: relative; top: -12px; } textarea{ display:block; font-size: 13px; color: #000; padding: 9px 12px 7px; width: 355px; height: 64px; margin: 7px 0 17px; border: 1px solid #C1C3CB; position: relative; font-weight:normal; margin: 7px 0 17px; box-shadow: inset 1px 1px 0px 0 #F0EFF2; } } &:before { content: ""; display: none; position: absolute; width: 13px; height: 10px; background-image: url(/img/ok-err.png); background-repeat: no-repeat; z-index: 99; right: 6px; top: 4px; } .send{ background: #F86501; color: #fff; font-size: 18px; text-align: center; padding: 7px 0; cursor: pointer; width: 116px; :hover{ background: #DB5B04; } } } .one-click-add-good{ display:none; position: fixed; width: 240px; height: auto; background: #fff; z-index: 1000; left: 50%; margin-left: -135px; top: 50%; margin-top: -150px; padding: 25px 37px 10px; font-weight: bold; text-align:center; .close{ position: absolute; width: 13px; height: 13px; background: url(/img/close5.png) no-repeat 0 0; top: 9px; right: 9px; cursor: pointer; } >span{ font-size:17px; display: inline-block; margin-bottom: 15px; } label{ display:block; font-size: 14px; input{ display:block; font-size: 13px; color: #000; padding: 9px 12px 7px; width: 355px; margin: 7px 0 17px; border: 1px solid #C1C3CB; position: relative; font-weight:normal; margin: 7px 0 17px; box-shadow: inset 1px 1px 0px 0 #F0EFF2; } span{ display: none; font-size: 13px; color: red; position: relative; top: -12px; } textarea{ display:block; font-size: 13px; color: #000; padding: 9px 12px 7px; width: 355px; height: 64px; margin: 7px 0 17px; border: 1px solid #C1C3CB; position: relative; font-weight:normal; margin: 7px 0 17px; box-shadow: inset 1px 1px 0px 0 #F0EFF2; } } &:before { content: ""; display: none; position: absolute; width: 13px; height: 10px; background-image: url(/img/ok-err.png); background-repeat: no-repeat; z-index: 99; right: 6px; top: 4px; } .send{ background: #F86501; color: #fff; font-size: 18px; text-align: center; padding: 7px 0; cursor: pointer; width: 116px; :hover{ background: #DB5B04; } } } .color-list { .current_w{ border: 2px solid red; } } .rub { font-family: 'PT Sans', serif; } .news-all-layout :last-child {margin-bottom:0px;} .color-list .current_w { border: 0!important; box-shadow: 0 0 0 2px red; } .select-model{ display: inline-block; margin-top: 1px; vertical-align: top; padding-left: 20px; li{ display: block; font-size: 16px; margin-bottom: 7px; text-align: left; position: relative; cursor:pointer; &:before{ content: ''; display: block; width: 17px; height: 19px; position: absolute; left: -24px; top: 0px; background-image: url(/images/select-model.png); background-repeat: no-repeat; background-position: 0 -25px; } &:hover:before{background-position:0 -50px;} &.act:before{background-position:0 -74px;} } } .error-block {border: 1px solid red;} .basket{ h1{} .sort{ font-size:13px; span{ display: inline-block; color:#119911; border-bottom:1px dashed #119911; cursor:pointer; position: relative; margin-right: 30px; line-height: 15px; &:hover{ border-bottom:0; } &.act{ color:#7e7f7f; border-bottom:0; &:after{ content: ''; display: block; position: absolute; width: 8px; height: 9px; background-image: url(/images/sprite-basket.png); background-repeat: no-repeat; background-position: 0 3px; top: 5px; right: -12px; } } &.top:after{ background-position: 0 -5px; } } /*.sort-2{ color:#119911; border-bottom:1px dashed #119911; cursor:pointer; &.act{ color:#7e7f7f; border-bottom:0; cursor:default; &:after{} } }*/ .print{ float: right; border-bottom: 1px solid #119911; &:before{ content: ''; display: block; position: absolute; width: 16px; height: 14px; background: url(/images/sprite-basket.png) no-repeat -16px 0px; top: 2px; left: -24px; } } } .basket-tabl{ position:relative; border-spacing: 0; margin-top: 15px; z-index: 0; margin-bottom: 20px; &:before{ content: ''; display: block; position: absolute; background: #EDEFF2; width: 720px; height: 40px; z-index: -1; left: -22px; } tr{ th{ background: #EDEFF2; text-align:left; padding:10px 0 } td{ height:107px; border-bottom:1px solid #D6D7E3; &.img{ width: 100px; text-align: center; img{ float: none; margin: 0; max-width: 70px; } } &.name{ width:145px; a{ overflow: hidden; text-overflow: ellipsis; display: block; height: 64px; color: #000; text-decoration: underline; &:hover{text-decoration: none;} } } &.model{ width:180px; position:relative; div{ width: 155px; /*background: url(/images/sprite-basket.png) #EDF0F2 no-repeat 7px -17px; padding: 6px 7px 4px 7px; cursor: pointer;*/ padding: 6px 7px 4px 7px; } ul{ display:none; position:absolute; width: 169px; li{ background: #F9F9F9; border-bottom: 1px solid #E4E4E4; margin-bottom: 0; padding: 3px 2px 1px 7px; cursor:pointer; &:before{ display:none; } } } } &.color{ width:40px; width: 25px; vertical-align:middle; text-align:center; padding-right:15px; span{ display:block; width:22px; height:22px; margin: 4px; } } &.price{ width:50px; width: 95px; color:#ff6c00; } &.num{ width:55px; input{ padding: 5px 0px 4px; display: inline-block; width: 29px; text-align: center; border: 1px solid #C1C3CB; } } &.sum{ width:80px; color:#ff6c00; font-weight:bold; } &.del{ span{ display:inline-block; width:11px; height:11px; cursor:pointer; background: url(/images/sprite-basket.png) no-repeat -33px 0px; } } } } } .basket-itog{ .clear{ color:#119911; display:inline-block; border-bottom:1px dashed #119911; line-height: 15px; cursor:pointer; } .itog{ font-size:13px; font-weight:bold; float:right; span{ color:#ff6c00; font-size:24px; margin-left: 10px; font{font-size:18px;} } } } .form-basket{ background: #EDEFF2; margin: 20px -22px 20px -22px; padding: 22px 22px 10px; .header{ display: block; font-size: 18px; font-weight: bold; margin-bottom: 22px; } div{ display:inline-block; width:325px; vertical-align:top; label{ width: 100%; display: block; margin-bottom: 14px; span{ display: block; font-size: 13px; font-weight: bold; margin: 0 0 4px 0; } input{ width: 301px; padding: 10px; border: 1px solid #C1C3CB; box-shadow: inset 1px 1px rgba(0,0,0,.3); &.error{ border: 1px solid red; } } textarea{ width: 306px; height: 163px; padding: 10px; border: 1px solid #C1C3CB; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.3); margin-bottom: 1px; } div{ border: 2px solid #F66723; width: 120px; text-align: center; margin-left: -4px; margin-right: -7px; padding: 6px 0 7px; cursor: pointer; } } &:nth-child(2){ margin-right:20px; } } } .basket-oforml{ font-size: 16px; background: #F66723; color: #fff; padding: 7px 16px; display: inline-block; float: right; margin-bottom: 60px; cursor:pointer; } } .label-new-item{ position: relative; width: 75px; height: 25px; background: url(/img/new-item.png) no-repeat 0 0; color: #fff; top: 0px; left: -28px; padding: 9px 0 0 15px; font-size: 12px; font-weight: bold; z-index: 200; } .spec-list-main{ position:relative; padding:19px; } .spec-list-main h3{ color:#000; font-size:12px; text-transform:uppercase; font-weight:bold; } .spec-list-main .label-new-item{} .spec-list-main .img-holder{ width:200px; margin:0px; float:none; } .spec-list-main .img-holder img{width:180px; max-height:400px;} .spec-list-main a{padding:0!important;} .spec-list-main a .text{ float: none; width: auto; } .spec-list-main a .text p{ font-size:13px; color:#119911; } .spec-list-main a .text p:after{ background: none; content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #119911; position: relative; top: -4px; left: 7px; font-size: 0px; } .addCartButton { color: #fff; background: #F66723; text-align: center; margin-bottom: 12px; padding: 8px 0; cursor: pointer; width: 202px; margin: auto; } h1 { margin-bottom: 10px; } .vendor-description{ margin-top: 80px; } .vendor-img{ display: inline-block; vertical-align: top; margin: 20px; } .vendor-text{ display: inline-block; width: 500px; } .vendor-text .title{ font-size: 22px; margin-bottom: 20px; } .vendor-h1{ margin: 50px 0 0 20px; }