akahn/ife-node-styles.html

## ife-node-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>

  <style type="text/css">
* {margin:0px; padding:0px;}
#node-area {width:400px; margin:40px;}

.comment{
margin-bottom:20px;
width:100%;
}

.comment-top{
border-color:#cccccc;
border-style:solid;
border-width:1px 1px 0px 1px;
}

.comment-top-wrapper1{
background-image:url(corner-top-left.gif);
background-position:0 0;
background-repeat:no-repeat;
left:-1px;
position:relative;
top:-1px;
}

.comment-top-wrapper2{
background-image:url(corner-top-right.gif);
background-position:100% 0;
background-repeat:no-repeat;
left:2px;
position:relative;
padding:20px;
}

.comment-top-inner-left{
  float:left;
  display:inline;
  width:60px;
}
.comment-top-inner-right{
  float:left;
  display:inline;
  width:80%;
  margin-left:10px;
}

.comment-top-inner-left img{
  width:58px;
  background:#cf8999;
  margin:1px 0px 0px 1px;
}

.comment-top-inner-left .user-image-container{
  width:60px;
  height:60px;
  overflow:hidden;
  background:#ccc;
}

.clearer {clear:both;}

.comment-footer-wrapper1 {
background-image:url(corner-bottom-right2.gif);
background:#eee url(corner-bottom-right2.gif) no-repeat;
background-position:bottom right;
background-repeat:no-repeat;
background-color:#eee;
}

.comment-footer-wrapper2 {
background-image:url(corner-bottom-left2.gif);
background-position:bottom left;
background-repeat:no-repeat;
}

.comment-footer-inner {
padding:20px;
}

  </style>
</head>

<body>

<div id="node-area">
  <div class="comment">

  <div class="comment-top">
      <div class="comment-top-wrapper1">
        <div class="comment-top-wrapper2">
            <div class="comment-top-inner-left"><div class="user-image-container"><img src="http://www.jrj-socrates.com/Cartoon%20Pics/Hanna%20Barbera/HB%20Misc/Secret_Squirrel__300.gif" alt="" /></div></div>
            <div class="comment-top-inner-right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</div>
            <div class="clearer"></div>
        </div><!--/wrap2-->
      </div><!--/wrap1-->
    </div><!--/comment-top-->

  <div class="comment-footer">
  <div class="comment-footer-wrapper1">
       <div class="comment-footer-wrapper2">
          <div class="comment-footer-inner">
          <p> dolor sit amet, consectetuer adipiscing elit.</p>
          </div><!--/comment-footer-inner-->
      </div><!--/comment-footer-wrapper2-->
    </div><!--/comment-footer-wrapper1-->
    </div><!--/comment-bottom-->

  </div><!--/comment-->
</div><!--/node-area-->

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>

	<style type="text/css">
	* {margin:0px; padding:0px;}
	#node-area {width:400px; margin:40px;}

	.comment{
	margin-bottom:20px;
	width:100%;
	}

	.comment-top{
	border-color:#cccccc;
	border-style:solid;
	border-width:1px 1px 0px 1px;
	}

	.comment-top-wrapper1{
	background-image:url(corner-top-left.gif);
	background-position:0 0;
	background-repeat:no-repeat;
	left:-1px;
	position:relative;
	top:-1px;
	}

	.comment-top-wrapper2{
	background-image:url(corner-top-right.gif);
	background-position:100% 0;
	background-repeat:no-repeat;
	left:2px;
	position:relative;
	padding:20px;
	}

	.comment-top-inner-left{
	float:left;
	display:inline;
	width:60px;
	}
	.comment-top-inner-right{
	float:left;
	display:inline;
	width:80%;
	margin-left:10px;
	}

	.comment-top-inner-left img{
	width:58px;
	background:#cf8999;
	margin:1px 0px 0px 1px;
	}

	.comment-top-inner-left .user-image-container{
	width:60px;
	height:60px;
	overflow:hidden;
	background:#ccc;
	}

	.clearer {clear:both;}

	.comment-footer-wrapper1 {
	background-image:url(corner-bottom-right2.gif);
	background:#eee url(corner-bottom-right2.gif) no-repeat;
	background-position:bottom right;
	background-repeat:no-repeat;
	background-color:#eee;
	}

	.comment-footer-wrapper2 {
	background-image:url(corner-bottom-left2.gif);
	background-position:bottom left;
	background-repeat:no-repeat;
	}

	.comment-footer-inner {
	padding:20px;
	}

	</style>
	</head>

	<body>

	<div id="node-area">
	<div class="comment">

	<div class="comment-top">
	<div class="comment-top-wrapper1">
	<div class="comment-top-wrapper2">
	<div class="comment-top-inner-left"><div class="user-image-container"><img src="http://www.jrj-socrates.com/Cartoon%20Pics/Hanna%20Barbera/HB%20Misc/Secret_Squirrel__300.gif" alt="" /></div></div>
	<div class="comment-top-inner-right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</div>
	<div class="clearer"></div>
	</div><!--/wrap2-->
	</div><!--/wrap1-->
	</div><!--/comment-top-->

	<div class="comment-footer">
	<div class="comment-footer-wrapper1">
	<div class="comment-footer-wrapper2">
	<div class="comment-footer-inner">
	<p> dolor sit amet, consectetuer adipiscing elit.</p>
	</div><!--/comment-footer-inner-->
	</div><!--/comment-footer-wrapper2-->
	</div><!--/comment-footer-wrapper1-->
	</div><!--/comment-bottom-->

	</div><!--/comment-->
	</div><!--/node-area-->

	</body>
	</html>