ilyakor,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">*{margin:0;padding:0}
body{width:100%;height:100%;color:#000;min-width:1005px;font:300 100.01% 'Open Sans',sans-serif;padding:42px 0 0 0;background:#f3cf53;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;position:relative}
::selection{background:#000;color:#fff}
a{color:#121011;display:inline-block;position:relative;text-decoration:none}
a:after{content:"";display:block;width:100%;position:absolute;height:1px;background:#121011;bottom:0;left:0}
a:hover{color:#e9b810}
a:hover:after{background:#e9b810}
p{font-size:1.25em}
h1,h2,h3,h4,strong{font-weight:800}
h1{font-size:3.125em;line-height:50px}
h2{font-size:2.1875em;line-height:35px}
h3{font-size:1.6666666666666667em;line-height:25px}
h4{font-size:1.125em;line-height:18px}
ul{list-style:none}
.left{float:left}
.right{float:right}
.wrapper{width:845px;margin:0 auto}
.clr{clear:both;overflow:hidden;height:0}
#documents{margin-bottom:60px}
#documents .info{font-size:14px;line-height:36px}
#documents>p{font-size:0.875em;line-height:16px;padding:2px 0}
#documents ul{margin:22px 0 0 -14px;line-style:none}
#documents ul li{padding:5px 15px;position:relative;cursor:pointer;display:block}
#documents ul li.active input,#documents ul li:hover input{display:block}
#documents ul li.active h4{text-decoration:line-through}
#documents ul li span{display:inline-block;padding:5px;margin:-5px}
#documents ul li h4{line-height:22px;display:inline-block}
#documents ul li p{font-size:0.875em;display:inline-block;line-height:16px}
#contacts h2{color:#fff;font-size:35px;line-height:35px;margin:0 0 18px 0}
#chk1,#chk2,#chk3,#chk4,#chk5,#chk6,#chk7,#chk8,#chk9,#chk10,#chk11{display:none;position:absolute;margin:5px 5px 5px -20px}
.arrow_box{position:absolute;background:#F3CF53;border:6px solid #000000;top:48px;right:128px;padding:5px 5px 5px 5px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-align:center}
.arrow_box:after,.arrow_box:before{right:98%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}
.arrow_box:after{border-right-color:#F3CF53;border:29.5px;margin-top:-29.5px}
.arrow_box:before{border-right-color:#000;border:38px;margin-top:-38px;-webkit-border-radius:20px;-moz-border-radius:15px;border-radius:15px}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function()
{
$("#documents").on('click', 'li', function(event)
{
$this = $(this);
if(event.target.tagName == "INPUT") $this.toggleClass('active');
$this.find('input').prop('checked', $this.hasClass('active'));
}
)
}
);
</script>
<div id="documents" class="wrapper">
<h2>ДОКУМЕНТЫ</h2>
<p>которые необходимо иметь на проверке знаний в комиссии</p>
<ul>
<li>
<input type="checkbox" id="chk1" />
<label for="chk1">
<span><h4>Паспорт</h4></span>
</label>
</li>
<li>
<input type="checkbox" id="chk2" />
<label for="chk2">
<span><h4>Выписка из приказа о назначении на должность</h4><br>
<p>необходимо, чтобы должность соответствовала «Единому тарифно-квалификационному справочнику»</p></span>
</label>
</li>
<li>
<input type="checkbox" id="chk3" />
<label for="chk3">
<span><h4>Удостоверение, подтверждающее наличие группы по электробезопасности</h4><br>
<p>или выписку из журнала проверки знаний с прежнего места работы, заверенную отделом кадров (для вновь принятых<br>на работу)</p></span>
</label>
</li>
<li>
<input type="checkbox" id="chk4" />
<label for="chk4">
<span><h4>Письмо-направление</h4><br>
<p>с указанием, в качестве кого будет использоваться данный специалист, за подписью руководителя предприятия</p></span>
</label>
</li>
<li>
<input type="checkbox" id="chk5" />
<label for="chk5">
<span><h4>Медицинскую справку с допуском к работе в действующих<br>электроустановках</h4><br>
<p>в справке должно быть написано: «Допущен к работе в действующих электроустановках»</p></span>
</label>
</li>
<li>
<input type="checkbox" id="chk6" />
<label for="chk6">
<span><h4>Должностная инструкция</h4></span>
</label>
</li>
<li>
<input type="checkbox" id="chk7" />
<label for="chk7">
<span><h4>Однолинейная схема электрохозяйства предприятия</h4></span>
</label>
</li>
<li>
<input type="checkbox" id="chk8" />
<label for="chk8">
<span><h4>Договор на электроснабжение</h4></span>
</label>
</li>
<li>
<input type="checkbox" id="chk9" />
<label for="chk9">
<span><h4>Договор аренды</h4><br>
<p>если помещение арендуется</p></span>
</label>
</li>
<li>
<input type="checkbox" id="chk10" />
<label for="chk10">
<span><h4>Журнал проверки знаний персонала предприятия</h4></span>
</label>
</li>
<li>
<input type="checkbox" id="chk11" />
<label for="chk11">
<span><h4>Протоколы испытаний оборудования предприятия</h4></span>
</label>
</li>
</ul>
<div class="info"><i>При проверке знаний персонала обязан присутствовать энергетик (лицо, ответственное за электрохозяйство)</i></div><br/>
</div>
</body>
</html>
