<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="ie ie6 lte9 lte8 lte7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7]>
<html class="ie ie7 lte9 lte8 lte7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8]>
<html class="ie ie8 lte9 lte8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9]>
<html class="ie ie9 lte9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 9]>
<html xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if !IE]><!-->
<html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<title>Документ без названия</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="js/PIE.js"></script><![endif]-->
<script type="text/javascript" src="js/my.js"></script>
<!--[if !IE]><!-->
<script>
if (/*@cc_on!@*/false) {
document.documentElement.className += ' ie ie10';
}
else {
document.documentElement.className += ' no-ie';
}
</script>
<!--<![endif]-->
</head>
<body>
<div id="wrap">
<h1 class="title">дизайнер выключателей</h1>
<div class="select_col">
<h2 class="h201">выберите коллекцию bticino:</h2>
<div class="list1">
<ul>
<li class="active"><a href="#" title="#"><img src="images/col1.png" alt=""/></a></li>
<li><a href="#" title="#"><img src="images/col2.png" alt=""/></a></li>
</ul>
</div>
</div>
<div class="select_back">
<h2 class="h202">подберите тон и фактуру стен:</h2>
<div class="list2_wr">
<div class="list2_t">
<h3 class="h301">вы выбрали:</h3>
<ul class="first">
<li><a href="#" title="#">рамка</a></li>
<li><a href="#" title="#">выключатель</a></li>
</ul>
<h3 class="h302">также вам понадобятся:</h3>
<ul>
<li><a href="#" title="#">Суппорт</a></li>
<li><a href="#" title="#">Коробка для твердых стен</a></li>
<li><a href="#" title="#">Коробка для стен из гипсокартона</a></li>
<li><a href="#" title="#">Led-подсветка механизма</a></li>
</ul>
</div>
<div class="list2_b">
<h3 class="h302">фактура стены:</h3>
<ul>
<li class="f1"><a href="#" title="#">empty</a></li>
<li class="f2"><a href="#" title="#">color</a></li>
<li class="f3 active"><a href="#" title="#">f1</a></li>
<li class="f4"><a href="#" title="#">f2</a></li>
</ul>
<h3 class="h302">цвет стены по спектру:</h3>
<div class="pic1"><img src="images/color_pick_1.png" alt=""/></div>
<h3 class="h302">насыщенность цвета</h3>
<div class="pic2"><img src="images/color_pick_2.png" alt=""/></div>
</div>
</div>
<div class="preview">
<div class="texture_wr">
<div class="texture" style="background: url('images/f3.png');">
<div class="r" style="background: url('images/r1_b.png');">
<div class="kl"><img src="images/kl1_b.jpg" alt=""/></div>
</div>
</div>
</div>
<div class="slider"><img src="images/img.jpg" alt=""/></div>
</div>
</div>
<div class="select_kl_form">
<div class="select_kl">
<h2 class="h203">цвет клавиши (механизм):</h2>
<div class="list2">
<ul>
<li><a href="#" title="#"><img src="images/kl1.jpg" alt=""/><span>Алюминий</span></a></li>
<li class="active"><a href="#" title="#"><img src="images/kl1.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/kl1.jpg" alt=""/><span>Антрацит</span></a></li>
</ul>
</div>
</div>
<div class="select_form">
<h2 class="h204">форма рамки:</h2>
<div class="list3">
<ul>
<li class="r1 active"><a href="#" title="#"></a></li>
<li class="r2"><a href="#" title="#"></a></li><!--
<li class="r3"><a href="#" title="#"></a></li>
<li class="r4"><a href="#" title="#"></a></li>-->
</ul>
</div>
</div>
</div>
<div class="select_r">
<h2 class="h205">выберите материал и цветовое решение рамки:</h2>
<div class="list4 active">
<h3 class="h303">рамки <strong>алюминий</strong></h3>
<ul>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li class="active"><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
</ul>
</div>
<div class="list4">
<h3 class="h303">рамки алюминий</h3>
<ul>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
</ul>
</div>
<div class="list4">
<h3 class="h303">рамки алюминий</h3>
<ul>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
</ul>
</div>
<div class="list4">
<h3 class="h303">рамки алюминий</h3>
<ul>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Титан</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r3.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r1.jpg" alt=""/><span>Алюминий</span></a></li>
<li><a href="#" title="#"><img src="images/r2.jpg" alt=""/><span>Титан</span></a></li>
</ul>
</div>
</div>
<div class="div1">
<h4 class="h401">возможные модицикации прямоугольных рамок axolute:</h4>
<img src="images/img2.png" alt=""/>
</div>
</div>
</body>
</html>