@font-face { font-family: plc; src: url('fonts/pl.otf'); } 
@font-face { font-family: plc; font-weight: bold; src: url('fonts/plb.otf'); }
@font-face { font-family: cond; src: url('fonts/cond.otf'); }  

@black: #050608;
@white: #fff;
@lightblue: #e0ecf0;
@linkcolor: #9bb7c2;
@linkcolorhover: @white;
@grey: #202020;

article, aside, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
* {
  margin:0;
  padding:0;
  border-collapse:collapse;
}

.cleaner { clear:both; }
.left { float:left; }
.right { float:right; }

.stdfont{
    font-family:plc !important;
    letter-spacing:-1px;
    font-size:16px;
    line-height:20px;
}

.ani(@wha: opacity, @time: 0.5s){
    transition: @wha @time;
    -moz-transition: @wha @time; /* Firefox 4 */
    -webkit-transition: @wha @time; /* Safari and Chrome */
    -o-transition: @wha @time; /* Opera */
}

.960cont(){
	width:960px;
	position:relative;
	text-align:left;
	margin:0 auto;	
	}

.opacity(@val : 0){
	-moz-opacity: @val;
	filter: ~"alpha(opacity = @{val})";
	opacity: @val;}

.rounded_corners (@radius: 4px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	-khtml-border-radius: @radius; 
	border-radius: @radius;
}
.no_corners_right {
	-moz-border-bottom-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-khtml-border-bottom-right-radius: 0; 
	border-bottom-right-radius: 0;
	-moz-border-top-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	-khtml-border-top-right-radius: 0; 
	border-top-right-radius: 0;
	}
	
.no_corners_top {
	-moz-border-top-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	-khtml-border-top-right-radius: 0; 
	border-top-right-radius: 0;
	-moz-border-top-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-khtml-border-top-left-radius: 0; 
	border-top-left-radius: 0;
	}

.no_corners_bottom {
	-moz-border-bottom-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-khtml-border-bottom-right-radius: 0; 
	border-bottom-right-radius: 0;
	-moz-border-bottom-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-khtml-border-bottom-left-radius: 0; 
	border-bottom-left-radius: 0;
	}

.text_shadow_b (@scolor: #fff) { 
	text-shadow:0px 1px @scolor;
  	 }
	 
.text_shadow_t (@scolor: #949494) { 
	text-shadow:0px -1px @scolor;
  	 }
	 
.box_shadow (@shadow: #e9e9e9) {
	box-shadow: 0 2px 3px @shadow;
	}

.last_one {&:last-child {margin-right:0;}}

img { border:0; }
html {
  width:100%;
  height:100%;
  background:url('img/html_bg.png') left top repeat-x @black;
}

a {
  color:@linkcolor;
  text-decoration:underline;
    &:hover {color:@linkcolorhover; text-decoration:none;}
    &:visited {color:@linkcolor;}
}

.hfont {font-family:cond; 
    font-weight:100;
    color:@lightblue;
    .text_shadow_b(#000);
    letter-spacing:0;
    &.mt {margin-top:40px;}
    }

h1 {.hfont;
    margin-bottom:20px;
    font-size:40px;
}
h2 {.hfont;
    margin-bottom:20px;
    font-size:24px;
    
}
h3 {.hfont;
    font-family:plc !important;
    letter-spacing:-1px;
    margin-bottom:20px;
    font-size:20px;
}

p {margin-bottom:15px;}

.x28 {font-size:28px;}
.x32 {font-size:32px;}
.likelink {color:@linkcolor; display:inline-block; text-decoration:none; cursor:pointer; border-bottom:1px dotted @linkcolor; &:hover {border-bottom:1px dotted @black;}}
.hide {display:none;}

ul{margin-bottom:15px;
    li {margin:0 0 8px 15px; list-style:circle;}
    &.pointed {li {list-style:none; background:url('img/icons/point.png')left top no-repeat; margin-left:0; padding:3px 0 3px 25px;}}
}

.wrapper {z-index:800; position:relative;}

.greybox{
    .rounded_corners;
    background: url('img/bg/greyhead.png') left top repeat-x @grey;
    padding:15px 15px 0;
    box-shadow:0 2px 10px #000;
    .text_shadow_t(#000);
}

small {font-size: 14px; line-height:15px; letter-spacing:0;}

body {
  
    min-width:960px;
  .stdfont;
  color:@white;
  text-align:center;
  position:relative;
  min-height:100%;
  height:auto !important;
background:url('img/body_bg.png') center top no-repeat;
font-family:plumb;
}


header {
    .960cont;
    min-height:171px;
    .logo { margin:15px 0 20px -10px; }
    menu {font-size:22px;
         a {display:inline-block; margin-right:50px; text-decoration:none; .last_one; .hfont; color:@linkcolor;
         &:hover, &.active{color:@white !important;}
         &:visited {color:@linkcolor;}
         .text_shadow_b(#000);
         }
        }
}
section {
    .960cont;
}
footer {.960cont;
    padding:40px 0 90px;
    .menu{  margin-bottom:40px;
             a {display:inline-block; margin-right:45px; text-decoration:none; .last_one; 
         &:hover, &.active {color:@white !important;}}
    }
    .logo {position:absolute;}
    p {margin-left: 220px; color:#494c51; font-size:14px;}
}
.backimage{
   position:absolute; top:171px; left:0; width:100%;  height:800px; 
}
#backimg {.backimage; background: url(img/intro/all.jpg) center top no-repeat; }
#backimg_new {.backimage; background: url(img/intro/new.jpg) center top no-repeat; display:none;}
#backimg_used {.backimage; background: url(img/intro/used.jpg) center top no-repeat; display:none;}

#listing {position:relative;
          li {
          .hfont;
          list-style:none;
          position:relative;
          width:150px;
          padding:24px 10px;
          margin-right:23px;
          margin-bottom:23px;
          margin-left:0;
          font-size:20px;
          .rounded_corners;
          border:1px solid #34393c;
          background:#0d0e11;
          float:left;
          text-align:center;
          display:none;
          .ani(background-color);
          a {text-decoration:none;}
          &.n1 { div {left:-1px;}}
          &.n2 { div {left:-196px;}}
          &.n3 { div {left:-391px;}}
          &.n4 { div {left:-586px;}}
          &.n5 { div {left:-781px;} margin-right:0;}
          &.double {padding:10px;}
          &.hl {color:@black; background:#e7f0f3; border:1px solid @black; box-shadow:0 0 5px #e7f0f3; text-shadow:0 1px #fff;
                a {color:@black; text-decoration:none;}
          }
          &:hover{ background:#777b7c;  border-color:#86898b; box-shadow: inset 0 1px #cbcbcb; a{color:#fff;} text-shadow:0 -1px @black;}
          div {position:absolute;  left:0; top:65px; .greybox; z-index:900; display:none; .stdfont; width:922px; box-shadow:none; text-align:left; }
    }
}

#footerimg {position:absolute; bottom:0; left:0; width:100%; background: url(img/footer_bg.png) center bottom repeat-x; height:344px;}

.type {position:absolute; font-size:18px; display:inline-block; padding:4px;
    &:hover, &.hl {.rounded_corners; background:#e7f0f3; color:#000; text-shadow:0 1px #fff; box-shadow:0 1px 3px #000; cursor:pointer; }
}

#intro {
    text-shadow:0 1px 3px #000;
    #select_auto {
        position:relative; 
        height:500px; 
        padding-top:40px;
        h2 {font-size:40px;
            .used, .new {display:none;}}
        
        #select_auto_new { .hfont; font-size:40px; position:absolute; left:135px; top:130px; text-shadow:0 1px 3px #000;}
        #select_auto_used { .hfont; font-size:40px; position:absolute; right:36px; top:130px; text-shadow:0 1px 3px #000;}
    }
    #select_type_container {position:relative; display:none;
        #type1 {.type; left:10px; top:100px;}
        #type2 {.type; left:316px; top:64px;}
        #type3 {.type; left:45px; top:320px;}
        #type4 {.type; left:386px; top:345px;}
        #type5 {.type; left:630px; top:70px;}
        #type6 {.type; left:710px; top:160px;}
        #type7 {.type; left:800px; top:205px;}
    }
}

.kompleks { position:relative;
        background:url('img/bg/footer.png') center bottom no-repeat;
        margin-bottom:20px;
        .img_select {margin-right:67px;}
        #royal {}
        #premium { position:relative; top:12px;}
        #optimal { position:relative; top:-10px;}
        #base { position:relative; top:-12px;}
        #sale {margin-right:0px; position:relative; top:-12px;}    
        .notify{.hfont; color:#515354; img {vertical-align:middle;} text-align:center; padding:15px 0;}
        .kompl_descr {position:absolute; left:0; top:140px; .greybox; z-index:900; display:none; 
        &:after {position:absolute; top:-15px; content: url('img/icons/grey_arrow_top.png'); width:16px; height:8px;}
        }
        #royal_descr {&:after {left:60px;}}
        #premium_descr {&:after {left:280px;}}
        #optimal_descr {&:after {left:500px;}}
        #base_descr {&:after {left:700px;}}
        #sale_descr {&:after {left:885px;}}
}
.bb { box-sizing: border-box; -moz-box-sizing:border-box;}
.page {margin-top:40px;}
.row {position:relative;
      &.logos {
        margin-top:30px;
        margin-bottom:30px;
        padding-top:50px;
        
        background:url('img/bg/hor_big_row.png') center top no-repeat;
        .logoone {
            box-sizing:border-box;
            width:33%;
            .bb;
            text-align:center;
            padding:0 20px;
            float:left;
            .logoimg {line-height:150px; img {vertical-align:middle;}}
            }
        }
    &.table3 {
        margin-top:30px;
        margin-bottom:30px;
        padding-top:50px;
        background:url('img/bg/hor_big_row.png') center top no-repeat;
        table {width:100%; 
            td,th {width:300px; padding:0 10px; text-align:center;} 
            td{vertical-align:top;}
        }
    }
    &.reviews{
        background: url('img/bg/right.png') 184px top no-repeat;
        margin:40px 0 50px;
        .bimg{margin:5px 5px 20px; width:400px; height:270px; position:relative;
            .imgcont {width:400px; height:270px; position:relative; overflow:hidden; img {position:absolute; bottom:0; left:0;}}
            
            a {position:absolute; padding:8px 15px; img {vertical-align:middle; margin-right:5px;} width:370px; top:0; left:0; z-index:801; text-align:left; height:300px;}
            &:before{ position:absolute; left:-5px; top:-5px; content:url('img/img_410_bord.png'); width:410px; height:280px;}
            //&:after{ position:absolute; left:0px; top:0px; content:url('img/bg/onimg.png'); width:400px; height:270px;}
        }
        .left, .right {width:410px; text-align:center;}
        small {color:@lightblue;}
    }
    &.cat {background: url('img/bg/right.png') 184px top no-repeat;
        margin:40px 0 50px;
        h3 {img {position:relative;} small {display:block; margin-top:10px;}}
        .shownext {margin-bottom:15px;}
        .big {font-size:24px;}
        .left, .right {width:410px; &:hover {.showinfo {.opacity(1);}} }
        .showinfo {.opacity(0); .ani;}
        
        .pro, .std {background: url('img/bg/pro.png') left top no-repeat; min-height:60px; padding:25px 0 0 55px; font-size:14px; letter-spacing:0; line-height:17px; color:@lightblue;}
        .std {background: url('img/bg/std.png') left top no-repeat;}
        
        .bimg{margin:5px 5px 5px 0; width:200px; height:190px; position:relative; text-align:center; font-size:20px; color:@lightblue; float:left;
            img {position:relative; margin-bottom:10px; width:205px;}
            &:before{ position:absolute; left:-6px; top:-6px; content:url('img/img_205_bord.png'); width:219px; height:150px;}
            &:after{ position:absolute; left:1px; top:1px; content:url('img/img_205_light.png'); width:205px; height:137px;}
            &.after {left:20px;}
        }
        }
    &.test {
        background: url('img/bg/right.png') 184px top no-repeat;
        margin:40px 0 50px;
        .left, .right {width:440px; }
        small {margin-bottom:15px; display:block; color:darken(@lightblue,20%);}
    }
    &.about {margin:40px 0 50px;
        font-size:18px;
        line-height:28px;
        .text_shadow_b(#000);
        .first {width:340px; float:left; margin-bottom:20px;}
        .second {width:260px; float:left; margin-right:60px; img {margin:15px 0;} margin-bottom:20px;}
        .third {width:300px; float:left; margin-bottom:20px;}
        
        .map, .vk {font-size:20px; padding:17px 0 17px 80px; background:url('img/icons/map.png') left center no-repeat; display:inline-block; margin-bottom:35px;}
        .vk {background:url('img/icons/vk.png') left center no-repeat;}
    }
}

.main_descr { .left; width:620px; background: url('img/bg/right.png') right center no-repeat; min-height:335px; padding-right:40px; padding-top:40px; position:relative;
    }
.main_sert {.right; width:275px; text-align:center; padding-top:40px; position:relative;
    p {position:relative; margin-top:-60px;}
    small {display:block; margin-top:14px;}
}

.reccommend { 
    position:relative; 
    margin-top:20px;
    padding-top:40px;
    background:url('img/bg/hor_big.png') center top no-repeat;
    min-height:200px;
    &:before {position:absolute; left:0; bottom:0; content:' '; width:960px; height:50px; background:url('img/bg/footer.png') center bottom no-repeat;}
    h2 {font-size:40px;}
    table {width:100%;
        margin:40px 0;
        td{text-align:center;
        img {.opacity(0.4); .ani; &:hover{.opacity(1);}}}
    }
    }
.endpicture {position:relative;
    &.about {background:url('img/cars/about.jpg') bottom right no-repeat; height:466px; margin-top:-100px;}
    &.reviews {background:url('img/cars/reviews.jpg') bottom center no-repeat; height:319px; margin-top:20px;}
    &.test {background:url('img/cars/test.jpg') bottom center no-repeat; height:317px; }
    &.contact {background:url('img/cars/contact.jpg') bottom center no-repeat; height:524px; margin-top:-200px; margin-bottom:-80px; }
    &.cat {background:url('img/cars/cat.jpg') bottom right no-repeat; height:509px; margin-top:-80px; margin-bottom:-30px; }
    &.kompleks {background:url('img/cars/kompl.jpg') bottom right no-repeat; height:509px; margin-top:-80px; margin-bottom:-50px; }
}
.kompl {
    min-height:500px;
    .descr {margin-top:35px; line-height:24px; position:relative;  
        margin-bottom:40px; padding-bottom:20px;
        .bimg{float:left; margin:0 30px 20px 0; position:relative; width:235px;}
        &:before {position:absolute; bottom:-200px; content:url('img/bg/hor_big.png'); left:0;}
        }
    .left {float:left; width:235px;}
    .right {float:right; width:700px;}
    .usl {position:relative; 
        li { position:relative; a{.likelink;}
            div {position:absolute; left:0; top:40px; .greybox; z-index:900; width:960px; display:none;
                &:after {position:absolute; top:-15px; left:30px; content: url('img/icons/grey_arrow_top.png'); width:16px; height:8px;}}
        }
    }
        
    

}