@import "styles/webfonts.css";

@footer-height: 300px;
@base-url: "../images/";

@bg-gray: #f8f8f8;

@text-content: #636363;
@text-blue: #273f8a;
@text-green: #45980f;
@text-purple: #8a1977;
@text-gray: #555;
@text-gray-light: #979797;

@border-gray: #dedede;
@border-but: #d1d1d1;

@font-arial: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
@font-pf: "PF Din Display Pro", Arial, sans-serif;
@font-pf-black: "PF Din Display Pro Black", Arial, sans-serif;
@font-pf-light: "PF Din Display Pro Light", Arial, sans-serif;

.round (@angle){
    -webkit-border-radius: @angle;
    -khtml-border-radius: @angle;
    -moz-border-radius: @angle;
    -ms-border-radius: @angle;
    -o-border-radius: @angle;
    border-radius: @angle;
    /*behavior: url(border-radius.htc);*/
}

.shadow (@shadow){
    -webkit-box-shadow: @shadow;
    -khtml-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    -ms-box-shadow: @shadow;
    -o-box-shadow: @shadow;
    box-shadow: @shadow;    
}

.text-shadow (@text-shadow){
    -webkit-text-shadow: @text-shadow;
    -khtml-text-shadow: @text-shadow;
    -moz-text-shadow: @text-shadow;
    -ms-text-shadow: @text-shadow;
    -o-text-shadow: @text-shadow;
    text-shadow: @text-shadow;
}

.opacity(@opacity){
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacity})";
  /* IE 5-7 */
  filter: alpha(opacity=@opacity);
  /* Netscape */
  -moz-opacity: @opacity / 100;
  /* Safari 1.x */
  -khtml-opacity: @opacity / 100;
  /* Good browsers */
  opacity: @opacity / 100;
}


#defaults {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
}

* {outline: none; margin: 0;}

html, body {height: 100%;}

body {position: relative; padding: 0px; margin: 0px; font-size: 14px; font-family: @font-arial; line-height: 19px;}

a img {border: 0px;}

h1, h2, h3, h4, h5, h6 {margin: 0px 0px 10px 0px; padding: 0px; font-weight: normal;}

input, select, textarea {font-size: inherit; font-family: inherit;}

p {margin: 0px 0px 1em 0px; padding: 0px;}

.noMargin {margin: 0px;}
.noPadding {padding: 0px;}
.plusOverflow {overflow: hidden;}
.plusClear {clear: both;}
.flLeft {float: left;}
.flRight {float: right;}
.posAbs {position: absolute;}
.posRel {position: relative;}

div.hr {height: 1px; margin: 10px 0px 10px 0px; font-size: 1px; line-height: 1px;}

input.text {}

input.submit {}

ul.mainMenu {
    margin: 0px;
    padding: 0px;
    li {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
       }
}

ul li {list-style-type: none;}

.wrapAll {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-top: 0;
    margin-bottom: -@footer-height; /* нижний margin является отрицательной величиной высоты wrapFooter */
    #defaults;
}

.wrapFooter, .pushFooter {
    height: @footer-height; /* .pushFooter должен быть той же высоты, что и .wrapFooter */
    #defaults;
}

/* his power level is over 9000 O_o */
body {background: #fff;}

.wrapHeader {
    .posRel; height: 165px;
    .wrapLogo {
        .flLeft; .plusOverflow; padding: 25px 0 0 0;
        img {.flLeft;}
        .title {.flLeft; margin: 4px 0 0 16px; text-transform: uppercase; font-family: @font-pf; font-size: 12px; color: #acacac; p {margin: 0; font-family: @font-pf-black; color: @text-blue; font-size: 26px; line-height: 1.2;}}
    }
    form {.posRel; .flRight; padding: 40px 0 0 0; width: 235px; input.search {.posAbs; right: 8px; bottom: 8px} input.text {width: 200px; padding: 5px 24px 5px 9px; min-width: 0;}}
    .contacts {
        @shift: 25px;
        .flRight;
        margin: 21px 0 0 32px; font-size: 12px; color: #8d8d8d;
        span, a {margin: 0 0 0 @shift;}
        span, strong {display: block;}
        strong {padding: 0 0 0 @shift; background: left center url("@{base-url}ico-phone.png") no-repeat; font-family: @font-pf; font-weight: bold; font-size: 24px; line-height: 1.2; color: @text-blue;}
        a {color: @text-blue; text-decoration: underline; font-family: @font-arial; font-size: 11px;}
    }
    ul.mainMenu {
        .posAbs; bottom: 12px; left: 0; .plusOverflow; width: 988px; height: 42px; border: solid 1px @border-gray; 
        background: 0 0 url("@{base-url}bg-gradient.png") repeat-x;
        li {
            .flLeft; .posRel; border-right: solid 1px@border-gray;
            a.root {
                display: block; height: 18px; padding: 12px 24px;
                font-family: @font-pf; font-weight: bold; font-size: 16px; text-transform: uppercase; color: @text-gray; text-decoration: none;
                &:hover {color: @text-blue;}
            }
            &.current {a.root, a.root:hover {background: 0 -42px url("@{base-url}bg-gradient.png") repeat-x; color: @text-blue; cursor: default;}}
        }
    }
}
.wrapBody {
    .slider-body {
        @border: solid 1px @border-gray;
        border: @border;
        .plusOverflow; .posRel; margin: 0 0 25px 0;
        .sb-area {
            .flLeft; width: 775px; height: 243px; 
            ul {
                margin: 0; padding: 0;
                li {
                    .posRel; margin: 0; padding: 0;
                    a.sb-slide {display: block;}
                    a.but {line-height: 14px; .shadow(none);}
                    .p1, .p2, .p3, .p4 {.posAbs;}
                    .p1 {left: 30px; top: 184px;}
                    .p2 {right: 408px; top: 368px;}
                    .p3 {left: 407px; top: 368px;}
                    .p4 {left: 0; top: 0;}
                } 
            }
        }
        ul.sb-controlls {
            .posAbs; .plusOverflow; left: 30px; top: 26px;
            margin: 0; padding: 0;
            li {
                .flLeft; width: 16px; height: 16px; margin: 0 2px 0 0; padding: 0; background-image: url("@{base-url}ico-sliderctrl.png"); background-repeat: no-repeat; background-position: 0 0; cursor: pointer;
                &.current {background-position: 0 -16px; cursor: default;}
            }
        }
        .sb-menu {
            .flRight; .posRel;
            width: 212px; height: 421px; background: right bottom url("@{base-url}bg-sb-menu.jpg") no-repeat #fff; border-left: @border;
            .title {padding: 22px 20px; font-family: @font-pf; font-weight: bold; font-size: 20px; line-height: 24px; text-transform: uppercase; color: @text-blue;}
            ul.menu {
                margin: 0; padding: 0; border-top: @border;
                li.root {
                    margin: 0; padding: 0;
                    border-bottom: @border;
                    a.menu, span.menu {
                        display: block; padding: 3px 0 3px 40px; font-family: @font-pf; font-weight: bold; font-size: 16px; line-height: 26px; color: #7d7d7d; text-decoration: none;
                        background: 20px center url("@{base-url}ico-arrow-left.png") no-repeat;
                        cursor: pointer;
                    }
                    &.current, &.current:hover, &:hover {background: 0 -10px url("@{base-url}bg-gradient.png") repeat-x; /* .inner {display: block;} */}
                }
                .inner {
                    display: none; .posAbs; right: 213px; top: 0; background: #fff; height: 100%; boredr-right: @border;
                    .title {padding: 22px 36px; white-space: nowrap; border-bottom: @border; text-align: right;}
                    .inner-content {
                        .posRel;
                        .ic-title {
                            .posAbs; left: 34px; top: 24px; width: 50%; font-family: @font-pf; font-weight: bold; font-size: 32px; line-height: 34px; color: @text-blue; text-transform: uppercase;
                            a {font-family: @font-arial; font-weight: normal; font-size: 11px; color: @text-blue; text-transform: none; &:hover {color: #000;}}
                        }
                        ul.ic-menu {
                            .posAbs; right: 34px; top: 24px; width: 30%; margin: 0; padding: 0;
                            li {margin: 0; padding: 0; text-align: right; a.menu {background: none; padding: 3px 0; &:hover {color: @text-blue;}}}
                        }
                    }
                }
            }
        }
    }
}
.wrapFooter {
    .posRel;
    .slider-footer {
        .posRel; top: 25px; height: 60px; margin: 0 0 50px 0; padding: 18px 0; border-top: solid 1px @border-gray; border-bottom: solid 1px @border-gray;
        ul li a {
            display: block;
            text-decoration: none;
            font-family: @font-arial; font-size: 11px; color: @text-gray-light;
            .title {
                padding: 0 0 3px 0; font-size: 13px; line-height: 14px; color: @text-gray; text-transform: uppercase;
                .plusOverflow; height: 42px;
            }
            &:hover .title {color: @text-blue;}
        }
    }
    ul.companies {
        .plusOverflow; background: #fff; margin: 0; padding: 0;
        li {
            .flLeft; margin: 0; padding: 0;
            a {display: block; padding: 0; text-align: center; text-decoration: none; .opacity(80); &:hover {.opacity(100);}}
            &.separate {background: left center url("@{base-url}companies-bg.png") no-repeat; margin: 0; padding: 0 0 0 20px;}
        }
    }
    .copyrights {.posAbs; left: 0; bottom: 18px; font-family: @font-arial; font-size: 11px; color: #a1a1a1; a {color: #a1a1a1; text-decoration: underline; &:hover {color: #000;}}}
    a.intraweb {.posAbs; right: 0; bottom: 18px; padding: 0 80px 0 0; font-family: @font-arial; font-size: 11px; color: #a1a1a1; text-decoration: none; background: right center url("@{base-url}logo-intraweb.png") no-repeat; &:hover {color: #000;}}
}

ul.event-horizon {
    .plusOverflow; .posRel; border: solid 1px @border-gray; margin: 0; padding: 0;
    height: 417px; width: 643px;
    li.eh {
        height: 290px + 43px + 2px; width: 643px; .posAbs; margin: 0; padding: 0; background: @bg-gray;
        .title {
            .plusOverflow; padding: 11px 42px 11px 12px; height: 20px; line-height: 22px; font-family: @font-pf; font-size: 20px; font-weight: bold; text-transform: uppercase; color: @text-blue;
            background: left bottom url("@{base-url}horizon-bg.png") repeat-x #fff;
            border-bottom: solid 1px @border-gray; border-top: solid 1px @border-gray;
            cursor: pointer;}
        .eh-arrow {.posAbs; right: 12px; top: 10px; width: 26px; height: 25px; background-image: url("@{base-url}horizon-arrow.png"); background-repeat: no-repeat; background-position: 0 -25px;}
        .text {max-height: 251px; overflow: auto; padding: 20px 30px; background: left top url("@{base-url}horizon-text-bg.png") repeat-x;}
        &.current {.eh-arrow {background-position: 0 0;} .title {cursor: default;}}
    }
}

.crumbs {
    margin: 0 0 16px 0; font-family: @font-arial; font-size: 11px; color: #9a9a9a;
    a {color: #9a9a9a; text-decoration: underline; &:hover {color: #000;}}
}

.Title {margin: 0 0 20px 0; padding: 0; font-family: @font-pf; font-size: 32px; font-weight: bold; line-height: 34px; color: @text-blue; text-transform: uppercase;}
h1,h2,h3,h4,h5 {&.Title {margin: 0 0 20px 0;}}

.content {
    font-family: @font-arial; font-size: 13px; line-height: 19px; color: @text-gray;
    h1, h2, h3, h4, h5 {font-family: @font-pf; font-weight: bold; color: @text-blue; &.uppercase {text-transform: uppercase;}}
    h3 {text-transform: uppercase; font-size: 20px; line-height: 1.2;}
    h5 {font-family: @font-arial; font-size: 13px; line-height: 19px; color: #000;}
    strong {font-weight: bold; color: #000;}
    b {}
    p {margin: 0 0 9px 0;}
    a.more {padding: 0 12px 0 0; font-size: 11px; color: @text-blue; text-decoration: underline; background: right center url("@{base-url}ico-more.png") no-repeat; &:hover {color: #000;}}
    ul {
        margin: 0 0 1em 0; padding: 0;
        li {margin: 0 0 6px 0; padding: 0 0 0 18px; background: left 8px url("@{base-url}content-li.png") no-repeat;}
    }
}

ul.wTriangles, .content ul.wTriangles {
    margin: 0; padding: 0;
    li {
        margin: 0; padding: 0 0 6px 14px; background: left 6px url("@{base-url}ico-arrow-right.png") no-repeat;
        font-family: @font-arial; font-size: 13px; line-height: 19px; color: @text-blue;
        a {color: @text-blue; text-decoration: underline; &:hover {color: #000;}}
        &.strong {font-family: @font-pf; font-weight: bold; font-size: 20px; line-height: 24px; color: #757575; background: left 8px url("@{base-url}ico-arrow-right.png") no-repeat;}
        &.nobg {background: none;}
    }
}

form {
    .plusOverflow;
    input.text, textarea {border: solid 1px @border-gray; color: #8d8d8d; padding: 5px 9px; font-family: @font-arial; font-size: 13px; .round(6px);}
    input.text {min-width: 132px;}
}

.wrapCols {
    .plusOverflow;
    .cLeft, .cCenter, .cMain {.flLeft; margin: 0 45px 0 0;}
    .cLeft, .cRight, .cCenter {width: 300px;}
    .cLeft {}
    .cMain {width: 645px;}
    .cCenter {}
    .cRight {.flRight;}
}

.but {
    padding: 6px 12px;
    font-family: @font-arial; font-size: 13px; font-weight: bold; line-height: 32px; cursor: pointer; color: #000; text-decoration: none;
    background: left bottom url("@{base-url}but-bg.png") repeat-x #fff; .round(6px); border: solid 1px @border-but; .shadow(0 0 2px 1px @border-but);
    span.bArrow {padding: 0 18px 0 0; background-position: center right; background-image: url("@{base-url}ico-arrow-down.png"); background-repeat: no-repeat; &.left {padding: 0 0 0 18px; background-position: center left;}}
    &:hover {background: @bg-gray;}
}

.box {
    display: block; margin: 0 0 20px 0;
    .title {margin: 0 0 16px 0; font-family: @font-pf; font-size: 20px; font-weight: bold; line-height: 1.2; text-transform: uppercase; color: @text-blue;}
    .border, &.border {border: solid 1px @border-gray;}
    .padding, &.padding {padding: 10px 12px;}
    a.social {text-decoration: none; padding: 0 6px 0 0; .opacity(80); &:hover {.opacity(100);}}
    &.shade {background: right bottom url("@{base-url}bg-shade.png") no-repeat #fff; /* min-height: 185px; */}
    .testimonials {
        .plusOverflow;
        .face {.flLeft;}
        .text {padding: 0 0 0 105px;}
    }
    .Gmap {height: 230px;}
    form {input.text {width: 252px;}}
/* promos */
    &.promo {
        padding: 0 0 119px 0; background: center bottom url("@{base-url}img-plan-big.png") no-repeat;
        a.but {
            .posAbs; bottom: 30px; right: 30px; padding: 6px 18px 5px 18px; .shadow(none); background: left bottom url("@{base-url}but-bg-big.png") repeat-x #fff;
            font-size: 18px; color: #e30000;
            span.bArrow {background-image: url("@{base-url}ico-arrow-down-red.png");}
            &:hover {background: @bg-gray;}
        }
        .special {
            .posAbs; right: -1px; top: -1px; padding: 20px 70px 20px 24px; background-color: #fff; background-position: right top; background-repeat: no-repeat; border: solid 1px @border-gray;
            font-family: @font-pf-light; font-size: 36px; line-height: 38px; color: #7d7d7d;
        }
        .overlay {
            .posAbs; background-repeat: no-repeat; background-position: 0 0;
            &.t1 {left: 454px; bottom: 0; width: 223px; height: 258px; background-image: url("@{base-url}img-young-lady.png");}
            &.t2 {left: 454px; bottom: 0; width: 303px; height: 278px; background-image: url("@{base-url}img-old-lady.png");}
        }
        .list {.posAbs; left: 30px; bottom: 30px; ul.wTriangles li {padding: 0 0 1px 14px; &.strong {padding: 0 0 4px 14px;}} .flLeft {margin: 0 22px 0 0;}}
        .title {.posAbs; left: 30px; top: 30px; font-size: 24px; p {margin: 0; font-size: 32px;}}
        .img {.posRel; border-bottom: solid 1px @border-gray;}

        &.red {.special {background-image: url("@{base-url}special-red.png");} .title {color: #df9192; p {color: #c02f2f;}}}
        &.green {.special {background-image: url("@{base-url}special-green.png");} .title {color: #9dca7f; p {color: #45980f;}}}
        &.blue {.special {background-image: url("@{base-url}special-blue.png");} .title {color: @text-blue; p {color: @text-blue;}}}
    }

    &.full-promo {
        .posRel; margin: 0 0 38px 0; font-family: @font-arial; font-size: 13px; line-height: 19px; color: @text-content;
        .title {font-size: 32px; line-height: 32px;}
        a.more {padding: 0 0 0 12px; font-size: 13px; color: @text-blue; text-decoration: none; background: left center url("@{base-url}ico-more.png") no-repeat; text-transform: uppercase; &:hover {color: #000;}}
        .natural, .medical, .hcg {.posAbs; top: 80px;}
        .natural {left: 30px; .title {color: #45980f;}}
        .medical {left: 306px; .title {color: @text-blue;}}
        .hcg {left: 740px; .title {color: #8a1977;}}
        .overlay {.posAbs; left: 504px; bottom: 0; width: 244px; height: 323px; background: left bottom url("@{base-url}img-young-lady-big.png") no-repeat;}
    }
}
a.box {text-decoration: none;}

/* tests */
.pf-black {font-family: @font-pf-black; color: @text-blue; font-size: 30px; font-weight: normal; line-height: 1.2; text-transform: uppercase;}