#main h1.title { font-size: 36px; margin-bottom: 12px;}

div.leftNav { width: 230px; float:left; }
.leftNav+div { margin-left: 264px; padding-top:0; overflow:hidden; }
.leftNav+.content .wrapper { clear: none; }
.leftNav+div::after { content:""; display:block; clear:left; }
#main>div::after { content:""; display:block; clear:left; }
.leftNav+div>div:first-child>article>.clap-blade { margin-top: 0; }


div.leftNav ul.leftnav { margin:0; padding:0; border: solid 1px #eee; border-top-color:#000; background: #fff; box-sizing: border-box;}
ul.leftnav li { display: block; list-style: none; margin:0; padding:0; border-top: solid 1px #eee;}
ul.leftnav li:first-child { border: none; }
ul.leftnav ul { margin:0; padding:0; }
ul.leftnav a { display: block; position: relative; padding: 4px 6px 4px 24px; text-decoration: none; color: #000; font-size: 14px;}
ul.leftnav a:hover { background: #f4f4f4; }
ul.leftnav a::before { content:""; display: block; position: absolute; left: 8px; border: solid 6px transparent; border-left-color: #ccc; }
ul.leftnav>li>a::before { border-left-color: #000; }

ul.leftnav li.open>a { background: #eee; }
ul.leftnav li.open>a::before { border-left-color: transparent; border-top-color: #ccc; top: 8px; margin-left:-6px; }
ul.leftnav li.active>a { background: #000; color: #fff; }
ul.leftnav>li.open>a { xbackground: #09c; }
ul.leftnav>li.open>a::before { border-top-color: #fff; }

ul.leftnav ul a { padding-left: 30px; } ul.leftnav ul a::before { left: 14px; }
ul.leftnav ul ul a { padding-left: 36px; font-size: 13px; } ul.leftnav ul ul a::before { left: 20px; }
ul.leftnav ul ul ul a { padding-left: 42px; font-size: 12px} ul.leftnav ul ul ul a::before { left: 26px; }
ul.leftnav ul ul a::before { border-width: 4px; }

.leftNav>input, .leftNav>label { display: none; }

@media (max-width: 720px) {
.leftNav { position: absolute; }
.leftNav+div { margin-left: 24px; padding-top: 26px; }

ul.leftnav li { display: none; }
ul.leftnav li.open { display: block; }
ul.leftnav li.open>a { display: none; }
ul.leftnav li.active>a { display: block; }
xul.leftnav:hover li, xul.leftnav:hover li>a { display: block; }
.leftNav>label { position: absolute; z-index:6; cursor: pointer; display: block; top:0; left:0; right:0; bottom:0; opacity:0; }
.leftNav>label::before { content:""; display: block; position: absolute; left: 50%; border: solid 6px transparent; border-bottom-color: #fff; }
.leftNav input:checked~label { top: -16px; bottom: 100%; margin-bottom: -1px; background: #000; opacity:1; }
.leftNav input:checked~ul { box-shadow: 1px 1px 2px #333; }
.leftNav input:checked~ul li, .leftNav input:checked~ul li>a { display: block; }
}