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

html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, dd, dt, dl, table, tr, td, th, p, span, strong, small, a, img, form { margin: 0px; padding: 0px; }
html { height: 100%; font-size: 62.5%; }
body { font: normal 14px Arial, Helvetica, sans-serif; color: #727272; background: #fff; min-width: 1000px; position: relative; height: 100%; }
img { border: none; }
a { cursor: pointer; text-decoration: underline; color: #727272; }
a:hover { text-decoration: none; }
p { padding-bottom: 15px; }
p small { font-size: 0.8em; }
h1, h2, h3, h4, h5, h6 { font: normal 18px Arial, Helvetica, sans-serif; color: #f79206; padding-bottom: 15px; text-transform: uppercase;}
h1 { font-size: 24px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
h5 { font-size: 12px; }
h6 { font-size: 11px; }
input[type='submit'], input[type='button'] { cursor: pointer; }
ul, ol { padding-left: 30px; }
ul li { list-style: disc outside; }
.set, .list1:after, .list2_b ul:after { height: 0; overflow: hidden; clear: both; font-size: 0; line-height: 0; display: block; content: '';}
.fl { float: left; }
.fr { float: right; }
.rel { position: relative; }

#wrap {  position: relative; width: 900px; margin: 15px auto; padding: 34px; border: solid #f79206 1px;}
    .title { position: absolute; right: 34px; top: -1px; border: solid 1px #f0a228; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius:  0 0 10px 10px; border-radius:  0 0 10px 10px; background: #FCC433; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FCC433), to(#fbac32)); background: -webkit-linear-gradient(#FCC433, #fbac32); background: -moz-linear-gradient(#FCC433, #fbac32); background: -ms-linear-gradient(#FCC433, #fbac32); background: -o-linear-gradient(#FCC433, #fbac32); background: linear-gradient(#FCC433, #fbac32); -pie-background: linear-gradient(#FCC433, #fbac32); font-size: 24px; font-weight: bold; color: #fff; line-height: 56px; height: 52px; padding: 0 17px 0 19px; text-shadow: 1px 1px 0 #f3a82b, -1px -1px 0 #f3a82b;}
    .title:after { position: absolute; display: block; content: '5 простых шагов к выключателю Вашей мечты'; right: -1px; top: 62px; font-size: 14px; font-weight: normal; color: #727272; text-shadow: none; text-transform: none; line-height: normal;}

    .h201, .h202, .h203, .h204, .h205 { font-size: 14px; padding: 2px 0 11px 30px; position: relative;}
    .h201:before, .h202:before, .h203:before, .h204:before, .h205:before { position: absolute; content: ''; left: -1px; top: -1px; width: 21px; height: 21px;}
    .h201:before { background: url(../images/n1.png);}
    .h202:before { background: url(../images/n2.png);}
    .h203:before { background: url(../images/n3.png);}
    .h204:before { background: url(../images/n4.png);}
    .h205:before { background: url(../images/n5.png);}
    .h205 { margin-bottom: 8px;}

.select_col { position: relative;}
    .list1 { position: relative; left: -1px;}
    .list1 ul, .list2_t ul, .list2_b ul, .select_kl ul, .list3 ul, .list4 ul { padding: 0; margin: 0;}
    .list1 li { float: left; list-style: none; display: block; margin: 0 21px 29px 0; padding: 0 0 5px; border-bottom: 2px solid transparent;}
    .list1 li:hover { border-color: #a1a2a1; }
    .list1 li.active { border-color: #f79206;}
    .list1 li img { float: left;}


.select_back { position: relative;}
    .list2_wr { float: right; width: 263px; margin-top: 1px;}
        .list2_t { border: solid 2px #f0a228; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0 20px 10px; text-align: center; margin-bottom: 19px;}
        .h301 { position: relative; top: -2px; left: -22px;  border: solid 1px #f0a228; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius:  5px 5px 0 0; border-radius:  5px 5px 0 0; background: #FCC433; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FCC433), to(#fbac32)); background: -webkit-linear-gradient(#FCC433, #fbac32); background: -moz-linear-gradient(#FCC433, #fbac32); background: -ms-linear-gradient(#FCC433, #fbac32); background: -o-linear-gradient(#FCC433, #fbac32); background: linear-gradient(#FCC433, #fbac32); -pie-background: linear-gradient(#FCC433, #fbac32); font-size: 18px; font-weight: bold; color: #fff; height: 40px; line-height: 44px; text-shadow: 1px 1px 0 #f3a82b, -1px -1px 0 #f3a82b; text-align: center; padding: 0; margin: 0 -44px 15px 0;}
        .list2_t li { list-style: none; padding: 0 0 7px;}
        .list2_t li a { display: block; border: solid 1px #a1a2a1; background: #FEFEFE; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEFEFE), to(#ebebeb)); background: -webkit-linear-gradient(#FEFEFE, #ebebeb); background: -moz-linear-gradient(#FEFEFE, #ebebeb); background: -ms-linear-gradient(#FEFEFE, #ebebeb); background: -o-linear-gradient(#FEFEFE, #ebebeb); background: linear-gradient(#FEFEFE, #ebebeb); -pie-background: linear-gradient(#FEFEFE, #ebebeb); text-decoration: none; font-size: 12px; line-height: 14px; color: #727272; padding: 4px 5px 3px;}
        .list2_t ul { padding-top: 2px;}
        .list2_t ul.first li a { font-size: 14px; line-height: 16px; font-weight: bold; text-transform: uppercase; padding: 6px 5px 5px;}
        .list2_t ul.first { margin-bottom: 6px; padding-top: 0;}


        .h302 { padding-bottom: 9px;}

        .list2_b { position: relative; padding: 16px 17px 9px; border: solid 1px #a1a2a1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box;}
        .list2_b .h302 { padding-bottom: 11px;}
        .list2_b li { list-style: none; display: block; padding: 0 0 16px 7px; float: left;}
        .list2_b li:first-child { padding-left: 0;}
        .list2_b li a { display: block; width: 47px; height: 48px; text-indent: -99in; overflow: hidden; border: solid 2px #a1a2a1;}
        .list2_b li.active a, .list2_b li:hover a { border-color: #f79206;}
        .f1 a { background: url(../images/f1.png);}
        .f2 a { background: #e8e8e8;}
        .f3 a { background: url(../images/f3.png);}
        .f4 a { background: url(../images/f4.png);}

        .pic1 { padding: 4px 0 12px;}
        .pic2 { padding: 4px 0 0;}

    .preview { position: relative; overflow: hidden; left: -1px; margin-bottom: 25px;}
        .texture_wr { float: left; width: 401px; height: 367px; border: solid 1px #a7a8a7;}
        .slider { float: left;}
        .texture { padding: 47px 51px 46px 50px;}
        .r { padding: 71px 84px 71px 83px;}
        .kl { width: 133px; height: 132px;}

    .select_kl_form { position: relative; overflow: hidden; padding: 1px 0 0 1px; left: -1px; top: -1px;}
        .select_kl, .select_form { float: left;}
        .select_kl { width: 298px; margin-right: 45px;}
            .list2 ul { width: 120%; margin-right: -40px;}
            .list2 li { list-style: none; float: left; width: 83px; text-align: center; padding: 0; margin: 0 24px 24px 0;}
            .list2 li img { width: 83px; height: 83px; margin-bottom: 4px; display: block;}
            .list2 li a {  text-decoration: none;}
            .list2 li span { display: block; padding: 4px 0 0; border-top: solid 2px transparent; font-size: 12px; color: #000;}
            .list2 li:hover span { border-color: #a1a2a1;}
            .list2 li.active span { border-color: #f79206;}

        .select_form { width: 270px;}
            .list3 { overflow: hidden;}
            .list3 li { list-style: none; display: block; float: left; margin: 0 26px 24px 0;}
            .list3 li a { display: block; width: 100px; height: 83px; padding-bottom: 4px; border-bottom: solid 2px transparent; background: url(../images/ramki.png) no-repeat;}
            .list3 li.active a { border-color: #f79206;}
            .list3 li.r1 a { background-position: 0 0;}
            .list3 li.r2 a { background-position: -110px 0; width: 94px;}
            .list3 li.r3 a { background-position: -220px 0;}
            .list3 li.r4 a { background-position: -338px 0; width: 96px;}
            .list3 li.r1 a:hover, .list3 li.r1.active a { background-position: 0 -119px;}
            .list3 li.r2 a:hover, .list3 li.r2.active a { background-position: -110px -119px;}
            .list3 li.r3 a:hover, .list3 li.r3.active a { background-position: -220px -119px;}
            .list3 li.r4 a:hover, .list3 li.r4.active a { background-position: -338px -119px;}


    .select_r { position: relative; top: -1px; left: -1px;}
        .list4 { overflow: hidden;}
        .list4 ul { width: 110%; margin-right: -30px; display: none;}
        .list4.active ul { display: block;}
        .list4 li { float: left; list-style: none; width: 93.5px; height: 124px; text-align: center; padding: 0; margin: 0 22px 0 0;}
        .list4 li img { width: 93px; height: 84px; margin-bottom: 4px; display: block;}
        .list4 li a {  text-decoration: none;}
        .list4 li span { display: block; padding: 4px 0 0; border-top: solid 2px transparent; font-size: 12px; color: #000;}
        .list4 li:hover span { border-color: #a1a2a1;}
        .list4 li.active span { border-color: #f79206;}

        .h303 { padding: 0 0 0 22px; margin-bottom: 13px; position: relative; cursor: pointer;}
            .h303:before { display: block; position: absolute; width: 14px; height: 14px; left: 0; top: 1px; background: url(../images/plus.png) no-repeat; content: '';}
            .list4.active .h303:before { background: url(../images/minus.png) no-repeat;}


    .div1 { background: #eaeaea; padding: 18px 16px 10px; text-align: center;}
        .h401 { font-size: 12px; color: #727272;}