@charset "utf-8";
/* CSS Document */

// Переменные
@width_full: 940px;

// Списки
@list_colors: color-red, color-green, color-gray;
@list_rgb: #d55c6d, #58cc72, #f2f3f2;
@list_font: 30px,26px,18px,18px,18px,18px, 10px,12px,13px,22px;

// Функции

/* Верстка */
[id=wrapper] { margin:0 auto; background:white;
  div.left, div.left > div { padding:0;}
}

#wrapper { font-size:16px;
/* Теги */
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
button, input[type='submit'], input[type='button'], [onclick] { cursor:pointer;}
a { color:extract(@list_rgb, 2); text-decoration:underline; font-family:inherit;
  &:hover { text-decoration:none;}
}
h1,.h1 { font-size:36px; font-weight:normal; color:extract(@list_rgb, 1); padding:0 20px 22px;margin:-1px 0 0; }
h2,.h2 { font-size:24px; font-family:'PTSerif-BoldItalic',sans-serif; padding:0 20px 12px;
  &.title { margin:26px 0 0;}
}
p { line-height:normal; padding:0 20px 10px;
  strong {font-family: 'PTSerif-Bold',sans-serif;}
}

/* Классы */
.hide { display:none;}
.relative { position:relative;}
.clear { clear:both;}

.left { float:left;}
.right { float:right;}
.c { text-align:center;}
.l { text-align:left;}
.r { text-align:right;}

.title { font-size:24px; font-family:'PTSerif-BoldItalic',sans-serif; padding:0 20px 12px; }

/* Элементы */
.fade { display:none; width:100%; height:100%; position:fixed; top:0px; left:0px; background:darken(#000,50%); opacity:0.5; z-index:1;}
.close { display:none;}

/* Разделитель */
.divider {.clear; height:10px;}
.separator { display:inline-block; width:1px; height:10px; background:#d2d2d2; margin:0 12px;}

/* Обертка */
.wrapper { width:@width_full; margin:auto;}

/* Цвета */
.generate-colors(length(@list_colors));
.generate-colors(@n, @i: 1) when (@i <= @n) {
  @color_name: extract(@list_colors, @i);
  .font-@{color_name} { color:extract(@list_rgb, @i) !important; }
  .generate-colors(@n,(@i + 1));
}

/* Размер шрифта */
.u { text-decoration:line-through;}
.i {font-family:'PTSerif-Italic',sans-serif;}
.font-arial {font-family:Arial, Helvetica, sans-serif;}

/* Элементы форм */
label {.font-arial; font-size:10px; opacity:0.8; text-transform:uppercase; line-height:22px;}
[type='text'] { width:360px; height:32px; padding:0 10px; margin:0 0 10px; border:1px solid #e5e5e5;}
textarea {background:white; border:1px solid #e5e5e5; padding:10px;}

/* Кнопки */
.in-cart { display:inline-block; width:26px; height:26px; border:none; background:url(images/icon-cart-small.png) left center no-repeat extract(@list_rgb, 2); vertical-align:middle; }
.in-order { display:block; width:26px; height:26px; border:none; background:url(images/icon-comment.png) center center no-repeat extract(@list_rgb, 1); vertical-align:middle; }
.send { height:40px; color:#022d0c; text-shadow:1px 1px 0 #86f29e; background:url(images/btn-send.png); font-size:19px; border:0px; font-style:italic; padding:0 15px;}
.in-ok { display:block; background-color:#c9cbc9 !important; text-decoration:none;}

/* NetCat */
.nc_absolute { position:absolute;}
.nc_msput { display:inline;}
.nc_admin-mode {
  .nc-form {background: #F5F5F5;margin: 20px 0px 0px;padding: 24px 20px 28px;
    span[id*=nc_capfld_] { display:block;}
  }
}
.cke { box-sizing:content-box;
  * {box-sizing:content-box;}
}

/*Верхний колонтитул*/
#header { margin:20px 0 0;
  .logo { float:left;}
  .slogan { width:160px; float:left; margin:0 0 0 10px; padding:6px 0 6px 10px; color:#b2b5b2; text-transform:uppercase; font-size:10px; border-left:1px solid #b2b5b2; line-height:normal; .font-arial;}
  .nav { width:400px; height:40px; float:right; text-align:right; font-size:16px; position:relative;
    span {}
    ul { position:absolute; bottom:0px; right:0px;
      li { color:extract(@list_rgb, 2); font-size:10px; margin:0 0 0 15px; text-transform:uppercase; float:left; .font-arial;
        a { font-family:inherit;}
      }
    }
  }
  .cart { width:50px; height:40px; float:right; background:extract(@list_rgb, 2); margin:0 0 0 20px; text-align:right; .font-arial; color:white; font-size:17px;
    &.active { background-color:extract(@list_rgb, 1); cursor:pointer;
      div {background:url(images/icon-cart-small.png) 9px center no-repeat; padding:11px 10px 0 0; }
    }
    div { width:inherit; height:inherit; background:url(images/icon-cart.png) center center no-repeat;}
  }
}

/* Навигация */
#nav { margin:30px 0 0;
  .wrapper { background:#f5f5f5;}
  ul { display:block; font-size:18px; line-height:35px; color:black;
    li { float:left; position:relative;
      &:hover,&.active { background:extract(@list_rgb, 2); color:white;}
      &:hover {
        ul { display:block;}
      }
      a { color:inherit; padding:0 20px; }
      ul { display:none; min-width:148px; position:absolute; top:100%; background:extract(@list_rgb, 2); padding:10px 0; border-top:1px solid white; z-index:2;
        li { float: none; clear: both; display: block; position: relative; color:white; .font-arial; font-size:16px; line-height:19px; padding: 0 20px 11px 20px;
          &:hover { background:none;}
          a { padding:0; line-height: 19px; padding-top: .5em;}
        }
      }
    }
  }
}

/* Теги */
#filter { line-height:28px; font-size:15px; margin:20px 0 0;
  .wrapper {background:#f5f5f5; padding:12px 20px;}
  .item { height:28px; float:left; margin:0 10px 0 0;
    span { color:#999; font-family:'PTSerif-Italic',sans-serif; margin:0 10px 0 0; }
    a {color:extract(@list_rgb, 2); padding:2px 3px; .font-arial;
      &:hover,&.active { background:extract(@list_rgb, 2); color:white;}
    }
  }
}

/* Слайдер */
#slider { margin:20px 0 0;
  .bx-wrapper { position:relative;
    .bx-controls {
      a { display:block; width:50px; height:83px; position:absolute; top:208px;
        &:hover { background-color:#c6f0b9;}
      }
      .bx-prev { left:0px; background:url(images/slider-prev-big.png) center center no-repeat;}
      .bx-next { right:0px; background:url(images/slider-next-big.png) center center no-repeat;}
    }
  }
  .item {
    .name { width:460px; position:absolute; bottom:30px; background:rgba(242,245,242,0.80); padding:30px 0 30px 50px;
      .sticker { position:absolute; bottom:100%; left:50px; .font-arial; color:white; font-size:14px; text-transform:uppercase; background:extract(@list_rgb, 1); line-height:normal; padding:7px 10px 3px; margin:0 0 0 -10px;}
      .desc { font-family:'PTSerif-Italic',sans-serif; font-size:22px;
        strong { font-size:30px;}
      }
      .price { position:absolute; top:10px; right:10px; font-size:24px; .font-arial; font-weight:bold;
        font { font-size:12px; vertical-align:top;}
        button {}
      }
    }
    .action { font-family:'PTSerif-Italic',sans-serif; position:absolute; left:480px; bottom:30px; background:extract(@list_rgb, 2); line-height:18px; padding:21px 20px;
      a { color:white;}
      strong {font-family: 'PTSerif-Bold',sans-serif; color:white;}
    }
  }
}

/* Контент */
#content {

  h3 {
    padding: 20px 20px 10px 20px;
  }

  ul {
    position: relative;
    top: -5px;
    padding: 0 0 6px 40px;

    li {
      padding-bottom: 8px;
      list-style: disc outside;
    }
  }

  .item {
    ul {
      position: relative;
      top: -5px;
      padding: 0 0 6px 0px;

      li {
        padding-bottom: 8px;
        list-style: disc outside;
      }
    }
  }
}

/* Каталог */
.catalog {margin:10px 0 0;
  .item { border:10px solid extract(@list_rgb, 3); float:left; position:relative; margin-top:20px;
    &.sub {
      .name { left:0px; max-width:360px;
        font {font-family: 'PTSerif-BoldItalic',sans-serif;}
      }
    }
    .name { padding:16px 20px; background:rgba(242,245,242,0.80); position:absolute; bottom:10px; left:10px; color:#999; font-size:17px; .font-arial; font-style:italic;
      font {color:black; font-family: 'PTSerif-Bold',sans-serif;font-size:22px; font-style:normal;}
      span { color:black; font-size:24px; font-style:normal; .font-arial; font-weight:bold; position:relative; top:-3px; padding:0 0 0 30px;
        font { position:relative; font-size:12px; padding:0 0 0 3px; text-transform:uppercase; top:-8px; font-family:inherit;}
      }
      ul { margin:10px 0 0; display:inline;
        li { display:inline; line-height:normal; .font-arial; margin:0 10px 0 0;  font-style:normal;
          &:last-child { margin:0;}
        }
      }
    }
    button { position:relative; top:-3px; left:10px; vertical-align:top;
      div { width:130px; background:rgba(38,38,38,0.30); text-align:left; color:white; font-style:italic; position:absolute; font-size:12px; .font-arial; padding:7px 8px; bottom:100%; left:-70px; margin:0 0 17px; line-height:normal;
        &::before {width:14px; height:14px; content:''; position:absolute; top:100%; right:33px; background:url(images/icon-order-y.png);}
      }
    }
  }
  .clear + .item { margin-right:20px;}
}


/* Полное отображение объекта */
#catalog-item-full {
  .content {min-height:598px; position:relative;
    #full-slider { width:@width_full; position:absolute; z-index:2; top:0px; margin:0;
      .close { display:block; height:26px; line-height:28px; padding:0 30px 0 10px; position:absolute; top:-54px; font-size:10px; text-transform:uppercase; background:rgba(178,248,156,0.80); color:black; right:0px; text-decoration:none; .font-arial;
        &::before { width:14px; height:14px; content:''; opacity:0.5; position:absolute; top:100%; right:44px; background:url(images/arrow-close.png); }
        span { font-size:20px; line-height:26px; font-weight:bold; position:absolute; top:0px; right:10px;}
        font { opacity:0.8;}
      }
      .bx-wrapper { position:relative;
        .bx-controls {
          a { display:block; width:50px; height:83px; position:absolute; top:208px;
            &:hover { background-color:#c6f0b9;}
          }
          .bx-prev { left:0px; background:url(images/slider-prev-big.png) center center no-repeat;}
          .bx-next { right:0px; background:url(images/slider-next-big.png) center center no-repeat;}
        }
      }
    }
  }
  .top { margin:0 0 26px;
    .slider { width:460px; height:300px; margin:0 20px 0 0; border:10px solid extract(@list_rgb, 3); float:left; position:relative;
      .bx-wrapper { position:relative;
        .bx-controls {
          a { display:block; width:25px; height:41px; position:absolute; top:122px;
            &:hover { background-color:#c6f0b9;}
          }
          .bx-prev { left:0px; background:url(images/slider-prev.png) center center no-repeat;}
          .bx-next { right:0px; background:url(images/slider-next.png) center center no-repeat;}
        }
      }
      .bxControls {
        span { display:block; width:25px; height:41px; position:absolute; top:122px;
          &:hover { background-color:#c6f0b9;}
        }
        .bx-prev { left:0px; background:url(images/slider-prev.png) center center no-repeat;}
        .bx-next { right:0px; background:url(images/slider-next.png) center center no-repeat;}
      }
    }
    .price { .font-arial; font-size:15px; float:left; line-height:22px;
      * { font-family:inherit;}
      table.complect {
        tr {
          td { padding:0 0 0 10px;
            &:first-child { min-width:170px; padding:0;}
          }
        }
      }
      table.size { margin:0 20px 0 0; float:left;
        tr {
          td { padding:2px 0 0 10px;
            &:first-child { min-width:60px; padding:0;}
          }
        }
      }
      .divider { height:28px;}
      .in-cart { width:100px; height:24px; color: #ffffff;}
      .in-order { width:18px; height:18px; background:url(images/icon-order-small-full.png);}
    }
  }
}

/* Баннер */
.banner { margin:20px 0 0; background:extract(@list_rgb, 1);
  .wrapper { outline:10px solid white; background:url(images/anons-bg.png); }
  .item {padding:30px 50px 20px; position:relative; color:white;
    img { float:right;}
    .top { font-size:10px; text-transform:uppercase; margin:0 0 30px; .font-arial; line-height:18px;}
    .bottom { font-size:42px; line-height:42px; letter-spacing: -1px; font-family: 'OpenSans-Light', sans-serif;
      strong { font-family: 'OpenSans-BoldItalic', sans-serif;}
    }
  }
}

/* Подобные товары */
.similar { background:extract(@list_rgb, 2); padding:17px 0; margin:55px 0 0;
  .title { font-size:20px; color: white; margin:0 0 20px; padding:0px; }
  .item { margin:0 20px 25px 0; float:left;
    &:nth-child(4) { margin-right: 0;}
    &:nth-child(8) { margin-right: 0;}
    &:nth-child(12) { margin-right: 0;}
    &:nth-child(16) { margin-right: 0;}
    &:nth-child(20) { margin-right: 0;}
    &:nth-child(24) { margin-right: 0;}
    &:nth-child(28) { margin-right: 0;}
    &:nth-child(32) { margin-right: 0;}
    &:nth-child(36) { margin-right: 0;}
    &:nth-child(40) { margin-right: 0;}
    &:nth-child(44) { margin-right: 0;}
    &:nth-child(48) { margin-right: 0;}
    &:nth-child(52) { margin-right: 0;}
    img { border:10px solid extract(@list_rgb, 3);}
    .name {.font-arial; max-width: 220px; font-size:15px; color:#333; line-height:22px; margin:8px 0 0;
      a { color:white;}
    }
  }
}

/* Корзина */
#cart {
  table { width:100%; margin:19px 0 0;
    tr {
      th { height:20px; text-align:left; line-height:20px; background:extract(@list_rgb, 2); .font-arial; font-size:10px; text-transform:uppercase; color:white; padding:0 0 0 10px;
        &.last { padding-right:10px; }
      }
      td { vertical-align:middle; padding:20px 0 20px 10px; background:#f5f5f5; border-bottom:1px solid white; font-size:20px; color:#333; .font-arial;
        &:first-child { vertical-align:top;}
        &.last { padding-right:10px; vertical-align:top;
          button { width:30px; height:30px; position:relative; top:-15px; padding:0; font-size:30px; color:#cecece; border:none; background:none; float:right; font-weight:bold;}
        }
        * { font-family:inherit;}
        span { display:block; width:32px; height:32px; background:white; border:1px solid #e5e5e5; text-align:center; padding:5px 0 0; float:right;}
        img { border:10px solid white; margin:0 20px 0 0;}
        button { text-align:right;}
        a { font-size:15px;}
        textarea { width:360px; height:68px;}
      }
    }
  }
}

/* Форма оформления заказа */
#mail { margin:40px 0 0;
  p { width:290px; margin:15px 0;}
  .title { padding-left:0;}
  .left:first-child { margin:0 60px 0 0;}
  .cloud { width:290px; background:rgba(178,248,156,0.50); padding:30px 20px; position:relative; font-size:18px; line-height: normal; margin:0 0 30px;
    &::before { width:27px; height:27px; content:''; background:url(images/arrow-cloud.png); position:absolute; left:100%; top:30px; }
  }
}

#contacts {
  p { line-height:20px; .font-arial; padding:12px 20px;
    &.bg-color-green { background:extract(@list_rgb, 2);color:white;
      a { color:inherit; }
    }
  }
  .left:first-child { margin:0 60px 0 0;}
  .form { margin:20px 0 0; padding:24px 20px 28px; background:#f5f5f5;
    .title {font-family:'PTSerif-Italic',sans-serif; padding-left:0;}
    textarea { width:480px; height:160px; margin:0 0 24px;}
  }
}

/* Нижний колонтитул */
#footer {margin:20px 0 0; background:#262626; padding:40px 0 25px;
  .nav {
    ul { display:block; font-size:18px; color:extract(@list_rgb, 3);; background:#f5f5f5;
      li { float:left; padding:0 40px 0 0;
        a { color:inherit; }
        ul { display:none;}
      }
    }
  }
  .phone { padding:50px 0 0; line-height:normal; color:extract(@list_rgb, 3); font-size:36px;}
  .nav-sub { padding:50px 0 15px;
    ul {
      li { color:extract(@list_rgb, 2); font-size:10px; margin:0 15px 0 0; text-transform:uppercase; float:left; .font-arial;
        a { font-family:inherit;}
      }
    }
  }
  .copy {.font-arial; font-size:13px; line-height:normal; color:#666;}
}
}