File: /home/analitts.ru/public_html/wp-content/themes/main/css/style.less
//out style.css, compress: true, strictMath: true
@import 'vars.less';
body {
font: 12px/18px Open Sans, sans-serif;
height: 100%;
color: #383838;
}
.wrapper {
width: 100%;
min-width: @min-width;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Eric Meyer's CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
html {
height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
height: @header-height;
background: rgba(218, 218, 218, 0.7);
position: relative;
z-index: 10;
.center {
padding-top: 20px;
.header-logo {
background: url(../img/header-logo.png);
width: 168px;
height: 63px;
float: left;
position: absolute;
}
.menu {
width: 700px;
margin: 0 auto;
padding-left: 70px;
padding-top: 4px;
li {
font-family: 'Trebuchet';
text-align: center;
text-transform: uppercase;
font-size: 16px;
display: inline-block;
padding: 0 10px;
&.current_page_item {
//border-top: 5px solid #8c0d0d;
font-weight: bold;
a {
border-top: 5px solid #8c0d0d;
font-weight: bold;
}
}
a {
color: #383838;
margin: 0px 0px 20px 0px;
text-decoration: none;
display: block;
padding: 20px 0;
}
a:hover {
border-top: 5px solid #8c0d0d;
//padding: 15px 0px 20px 0px;
font-weight: bold;
}
}
}
.header-search {
z-index: 30;
position: relative;
float: right;
margin-top: 14px;
.screen-reader-text {
display: none;
}
input[type=text] {
background: #8c0d0d;
color: #ffffff;
height: 38px;
border: 0;
box-sizing: border-box;
padding: 8px;
display: block;
}
input[type=submit] {
position: relative;
float: right;
margin: -30px 4px 0 0;
border: 0;
width: 23px;
background: url(../img/search.png) center no-repeat;
height: 23px;
cursor: pointer;
outline: none;
}
}
}
.triangle {
background: url(../img/triangle.png);
width: 369px;
height: @triangle-height;
position: absolute;
right: 0;
display: none;
z-index: 20;
.sign {
margin-left: 50px;
font-weight: bold;
font-size: 32px;
line-height: 32px;
text-transform: uppercase;
color: #ffffff;
a {
color: #ffffff;
text-decoration: none;
}
}
}
}
.divBg {
position: fixed;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 900;
display: none;
}
.success-wrapper {
position: fixed;
width: 300px;
display: none;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
background: #f4f2f2;
z-index: 1000;
padding: 20px;
box-sizing: border-box;
.text {
margin-top: 50px;
font-size: 18px;
text-align: center;
color: #970c2b;
}
}
.form-order-wrapper {
width: 477px;
height: 275px;
position: absolute;
display: none;
z-index: 1000;
background: #f4f2f2;
box-sizing: border-box;
padding: 5px 20px;
.text {
margin-top: 30px;
margin-bottom: 30px;
color: #970c2b;
font-size: 16px;
text-align: left;
}
table {
width: 100%;
tr {
height: 40px;
td {
vertical-align: top;
&:first-of-type {
vertical-align: middle;
font-weight: bold;
color: #383838;
font-size: 16px;
text-transform: uppercase;
width: 200px;
}
input[type=text] {
margin-top: 10px;
height: 20px;
width: 100%;
border: 0;
outline: none;
background: 0;
border-bottom: 1px solid #383838;
font-size: 16px;
}
#btnItemOrder {
border: 0;
margin-top: 20px;
background: #970c2b;
width: 100%;
color: #ffffff;
height: 30px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
}
}
}
}
/* Middle
-----------------------------------------------------------------------------*/
.content {
padding: 0 0 117px;
}
.bx-wrapper {
height: @triangle-height;
margin: 0 auto;
.bx-viewport {
border: 0;
left: 0;
/*margin-top: -@header-height;*/
}
img {
height: @triangle-height;
width: 100%;
}
}
#bx-pager {
width: 500px;
margin: 0 auto;
margin-top: -7px;
z-index: 200;
position: relative;
table {
tr {
td {
vertical-align: top;
}
}
}
.arrow-left {
background: url(../img/slider-arrow-left.png) center no-repeat, url(../img/slider-pager-back.png) 0 7px no-repeat;
width: 33px;
height: 40px;
display: inline-block;
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
a {
display: inline-block;
background: url(../img/slider-pager-back.png) no-repeat;
background-position: 0 7px;
width: 33px;
height: 40px;
text-decoration: none;
margin: 0 1px;
color: #383838;
font-size: 14px;
text-align: center;
box-sizing: border-box;
padding: 10px;
&.active {
background: url(../img/slider-pager-active.png) bottom no-repeat;
color: #ffffff;
}
}
.arrow-right {
background: url(../img/slider-arrow-right.png) center no-repeat, url(../img/slider-pager-back.png) 0 7px no-repeat;
width: 33px;
height: 40px;
display: inline-block;
padding: 10px;
cursor: pointer;
box-sizing: border-box;
}
}
.center {
h2 {
font-size: 20px;
margin-top: 20px;
font-family: "Open Sans Bold", sans-serif;
color: #8c0d0d;
margin-bottom: 20px;
}
width: 100%;
margin-top: 25px;
font-size: 14px;
.breadcrumbs {
margin-top: 20px;
color: #383838;
a,
span {
color: inherit;
}
a:hover {
color: #8c0d0d;
}
}
.main-text {
margin: 60px 0;
h1 {
font-size: 32px;
color: #383838;
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 20px;
margin-top: 20px;
font-family: "Open Sans Bold", sans-serif;
color: #8c0d0d;
margin-bottom: 20px;
}
table {
width: 100%;
&.services {
tr {
td {
width: 33%;
box-sizing: border-box;
&:first-of-type {
padding: 0 20px;
}
a {
display: block;
margin-bottom: 15px;
text-transform: uppercase;
font-size: 16px;
color: #383838;
text-decoration: none;
&:hover {
text-decoration: underline;
color: #8c0d0d;
font-weight: bold;
}
}
}
}
}
tr {
td {
width: 50%;
box-sizing: border-box;
&:last-of-type {
padding: 0 40px;
}
}
}
}
p {
font-size: 16px;
text-align: justify;
margin-top: 20px;
&.more {
font-size: 14px;
margin-left: 80px;
font-style: italic;
}
}
.price {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
ol {
list-style: decimal;
margin-left: 80px;
li {
font-size: 16px;
margin-top: 10px;
padding: 10px;
box-sizing: border-box;
&:nth-child(2n) {
background: #f4f2f2;
}
.btn-order {
color: #ffffff;
text-align: center;
border: 0;
background: #8c0d0d;
text-transform: uppercase;
width: 250px;
margin-top: 10px;
height: 30px;
cursor: pointer;
}
}
}
a {
color: #383838;
font-weight: bold;
text-decoration: none;
&:hover {
color: #8c0d0d;
text-decoration: underline;
}
}
#posts {
margin-left: 80px;
h3 {
font-size: 16px;
}
}
}
.pluses {
background: url(../img/chemistry-back.png) center no-repeat;
height: 792px;
text-align: center;
table {
width: 100%;
margin-top: 40px;
tr {
td {
vertical-align: top;
width: 33%;
&.second {
width: 50%;
text-align: center;
.plus {
margin-top: -150px;
&.first {
margin-left: 175px;
font-size: 14px;
}
&.second {
margin-left: -175px;
}
}
}
}
}
}
h2 {
padding: 25px 35px;
display: inline-block;
border: 2px solid #383838;
text-transform: uppercase;
font-size: 32px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
margin-top: 40px;
}
.plus {
background: url(../img/rectangle.png) center no-repeat;
width: 289px;
height: 289px;
color: #ffffff;
font-style: italic;
font-size: 22px;
display: inline-block;
box-sizing: border-box;
padding-top: 136px;
}
}
table {
width: 100%;
&.services-list {
tr {
td {
padding: 10px 0;
vertical-align: top;
box-sizing: border-box;
&:first-of-type {
width: 400px;
img {
width: 297px;
height: 297px;
}
}
h3 {
text-transform: uppercase;
border-bottom: 2px solid #383838;
font-weight: bold;
font-size: 22px;
padding-bottom: 30px;
}
p {
width: 100%;
margin-top: 25px;
font-size: 14px;
}
}
}
}
&.lab-eq-list {
tr {
td {
padding: 10px 0;
vertical-align: top;
box-sizing: border-box;
&:first-of-type {
width: 500px;
img {
width: 297px;
height: 297px;
}
}
h3 {
text-transform: uppercase;
font-size: 22px;
line-height: 22px;
}
&.text {
margin-top: 15px;
font-size: 14px;
}
&.last {
padding: 0;
vertical-align: middle;
.btn-order {
color: #ffffff;
text-align: center;
border: 0;
background: #8c0d0d;
text-transform: uppercase;
width: 250px;
float: right;
margin-right: 43px;
height: 30px;
cursor: pointer;
}
.price {
padding: 0 10px 0 20px;
}
}
}
}
}
&.lab-eq {
margin-top: 30px;
tr {
td {
vertical-align: middle;
font-size: 24px;
padding: 10px;
text-align: center;
img {
max-width: 300px;
}
}
&:nth-child(2n) {
background: #f4f2f2;
}
}
}
}
.contacts {
padding-left: 50px;
font-size: 16px;
h4 {
text-transform: uppercase;
font-size: 22px;
}
}
}
.columns {
overflow: hidden;
.column {
width: 50%;
text-align: center;
height: 919px;
display: inline-block;
float: left;
a {
display: block;
z-index: 20;
left: 50%;
position: absolute;
margin-top: 300 + @header-height;
margin-left: -100px;
width: 200px;
color: #383838;
line-height: 30px;
text-decoration: none;
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
&#column1 a {
left: 25%;
}
&#column2 a {
left: 75%;
}
img {
width: 100%;
}
}
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
margin: -117px auto 0;
min-width: @min-width;
height: 117px;
background: #f4f2f2;
position: relative;
padding: 40px;
box-sizing: border-box;
.center {
width: 100%;
.rights {
width: 250px;
float: right;
font-size: 16px;
text-align: right;
}
.spaceapp {
background: url(../img/spaceapp.png);
width: 42px;
height: 27px;
display: block;
margin: 0 auto;
}
.footer-phone {
float: left;
font-size: 16px;
}
}
}
/* Common
-----------------------------------------------------------------------------*/
.center {
width: @min-width;
margin: 0 auto;
}
input[type=search] {
font-family: "Ubuntu", sans-serif;
}
input[type=text]:-moz-placeholder,
textarea:-moz-placeholder,
input[type=search]:-moz-placeholder {
color: #ffffff;
}
input[type=text]:-webkit-input-placeholder,
textarea:-webkit-input-placeholder,
input[type=search]:-webkit-input-placeholder {
color: #ffffff;
}
input[type=text]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: #ffffff;
}
input[type=text]::-moz-placeholder,
textarea::-moz-placeholder,
input[type=search]::-moz-placeholder {
color: #ffffff;
}
strong {
font-weight: bold;
}
div.tooltip {
background: none;
border: 0;
}
.tooltip {
position: absolute;
min-width: 165px;
z-index: 1030;
display: block;
visibility: visible;
font-size: 14px;
line-height: 1.4;
/*opacity:0;filter:alpha(opacity=0);*/
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px;
margin-top: 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px;
}
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.content h1{
font-size: 32px;
color: #383838;
text-transform: uppercase;
font-weight: bold;
margin: 20px;
}
.content table{
margin-top: 15px;
}
.content a.strHrom{
font-size: 16px;
margin: 20px;
padding-bottom: 10px;
}
.content table.xml td{
border: 1px solid silver;
}
.content table.xml tr:first-child{
background: silver;
}