otwcode/otwarchive

/*==GROUP: COMMENTS
http://otwcode.github.com/docs/front_end_coding/patterns/comments

Comments are shown in #feedback at the end of a chapter or work, at the end of news posts, and can also be shown on their own page as a threaded list.
The comment form generally belongs to the class "post".
Comments are also shown in user home: inbox and that containing view is styled in zone-home.
Wrangler discussion boards are not grouped with comments and they only show up in the Tag Zone.
test note: have put clearfixes on listbox, blurb and comments here, to allow for dynamic content and for skins robustness, but it's an eleventh hour change and needs testing in ie7*/

#feedback {
  margin: 0 0 auto;
}

div.comment, li.comment {
  position: relative;
  border: 1px solid #ddd;
  overflow: visible;
  text-align: start;
}

.comment:after,
.comment h4.byline:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.comment div.icon {
  float: left;
  margin: -1.5625em 0.5625em 0.5625em 0;
  border-bottom: 5px solid #ddd;
}

.comment .icon .anonymous {
  background: url("/images/imageset.png") no-repeat -0px -735px;
  display: block;
}

.comment .icon .visitor {
  background: url("/images/imageset.png") no-repeat 0px -635px;
  display: block;
}

.comment h4.byline {
  background: #ddd;
  padding: 0.25em 0.25em 0.25em 108px;
  margin: 0 auto -0.25em;
}

.comment .role {
  font-weight: bold;
}

.thread .thread {
  margin-left: 3%;
}

.thread .even {
  background: #eee;
  margin: 0;
}

fieldset.comments, .comment .userstuff {
  background: transparent;
  border: none;
    box-shadow: none;
}

.comment .userstuff {
  margin-bottom: 1em;
  margin-top: 1em;
  min-height: 3.3em;
}

.comment fieldset {
  margin: 0;
}

.comment .posted {
  float: right;
}

.comment .edited {
  margin: 1.286em 0.643em 0.25em;
}

.comment .message {
  padding: 0.643em;
}

/* mods */

.abbreviated .icon {
  height: 75px;
  width: 75px;
}

.abbreviated .icon .anonymous {
  background: url("/images/imageset.png") no-repeat -75px -450px;
}

.abbreviated .icon .visitor {
  background: url("/images/imageset.png") no-repeat 0px -450px;
}

.abbreviated h4.byline {
  padding-left: 83px;
}

/*END== */