Foundation 5 Nested Comments

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
		
		<ul class="nested-comments">
			<li>
				<div class="comment-box">
                    <img src="http://surface.surgd.com/fiddle/profile-sm.jpg" class="comment-author" />
					<em>Alexandra wrote:</em>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                    <a href="" class="reply-link">Reply <i class="fa fa-reply"></i></a>
				</div>
				
				<ul>
					<li>
						<div class="comment-box">
							<p><a href="" class="author">Adi Purdila</a></p>
							<em>Yesterday</em>
							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
							<a href="" class="reply-link">Reply</a>
						</div>
		
						<ul>
							<li>
								<div class="comment-box">
									<p><a href="" class="author">Adi Purdila</a></p>
									<em>Yesterday</em>
									<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
									<a href="" class="reply-link">Reply</a>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<div class="comment-box">
					<p><a href="" class="author">Adi Purdila</a></p>
					<em>Yesterday</em>
					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
					<a href="" class="reply-link">Reply</a>
				</div>
			</li>
		</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 600italic);
 body {
    padding: 60px;
    font-family:"Open Sans", Arial, sans-serif;
}
ul.nested-comments li, ul.nested-comments-complex li {
	margin-left: 3em;
}

ul.nested-comments li ul {
	border-left: 1px solid #000;
	position: relative;
}

ul.nested-comments-complex li ul {
	position: relative;
	background: transparent url('http://surface.surgd.com/fiddle/has-bg.png') repeat-y left top;
}

ul.nested-comments li ul::before {
	content: '';
	position: absolute;
	border-bottom: 1px solid #999;
	width: 2em;
	top: 2em;
}

ul.nested-comments-complex li ul::before {
	content: '';
	position: absolute;
	width: 2em;
	top: 2em;
	background: transparent url('http://surface.surgd.com/fiddle/has-bg.png') repeat-x left top;
	height: 5px;
}

div.comment-box {
    position: relative;
	background: white;
	border: thin solid #efefef;
	padding: 0.7rem;
	margin-bottom: 1em;
}

  .comment-box:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 27px;
    border-style: solid;
    border-width: 13px 13px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
}
img.comment-author {
    float: left;
    margin: 5px 20px 15px 0px;
    border-radius: 1000px;
    width:60px;
    height: 60px;
}
 
 .related-posts-box {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #efefef;
    border-bottom-color: #E8522F;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #FFF;
    color: #333333;
}
 .related-posts-box:before {
    content:"";
    position: absolute;
    left: 50%;
    margin-left: -40px;
    top: -2px;
    background: #E8522F;
    width: 80px;
    height: 4px;
}
 .related-posts-box:after {
    content:"";
    position: absolute;
    right: 40px;
    bottom: -1px;
    background: #E8522F;
    width: 80px;
    height: 1px;
}

 .related-posts-box p {
    font-size: 0.8rem;
}
img.related {
   ...

JavaScript

$(document).foundation();