/* COMMENTS */
html,
div#gridMainColumn {
  background-color:transparent;
}
div.commentsHeader {
  background: #6cb112;
  height: 21px;
  margin-bottom:3px;
  padding-bottom:3px;
}
body.CommentPopup div.commentsHeader h3,
div.commentsHeader h3 {
  background-color: #6cb112;
  background-image: none;
  clear: both;
  color: #fff;
  display: block;
  float: none;
  font-family: "Lucida Grande",Geneva,Arial,Helvetica,sans-serif !important;
  font-size: 100%;
  font-weight: bold;
  padding: 3px;
  text-align: center;
}
  .PromotionsBlogPost div.commentsHeader h3 {
    background-color:#f73b00;
  }
div.commentsHeader a.feedLink {
  background: url(http://slog.thestranger.com/images/rss-small.gif) no-repeat transparent;
  color: rgb(237, 238, 238);
  font-size: 0px;
  margin-left: 1px;
  padding: 12px 0px 0px 12px;
  text-decoration: none;
}
div#readerComments form#sort {
  padding: 3px;
}
p.commentNotice { 
  background:#ffc;
  border-top:1px solid #ccc;
  font-size:.9em;
  font-style:italic;
  margin:0!important;
  padding:9px;
  text-align:center;
}
div.comment {
  margin: 10px 0;
  padding: 10px 0;
}
div.commentText {
  background: #FFFFFF none repeat scroll 0 0;
  clear: both;
  font-size: 12px;
  margin: 10px 10px 0;
  padding: 12px 12px 23px;
  text-align:left;
  overflow: hidden;
}
  div.commentText.staff {
    background:#fff url(/images/icons/staff-comment-badge.gif) right bottom no-repeat;
  }
  div.commentText.StrangercrombieDonor2010 {
    background:#fff url(/images/badges/strangercrombie-donor-2010.gif) right bottom no-repeat;
  }
  div.commentText.AwesomePerson2011 {
    background:#fff url(/images/badges/awesomeperson-2011.png) right bottom no-repeat;
  }
  div.commentText.SWASHBUCKLING-HERO-2012 {
    background:#fff url(/images/badges/swashbuckling-hero-2012.png) right bottom no-repeat;
  }
  div.commentText.PEARL-JAM-FAN-2013 {
    background:#fff url(/images/badges/pearl-jam-fan-2013.gif) right bottom no-repeat;
  }
  div.commentText.MACKLEMORE-RYAN-LEWIS-FAN-2013 {
    background:#fff url(/images/badges/macklemore-fan-2013.gif) right bottom no-repeat;
  }  
  div.commentText.SLOG-FAN-2013 {
    background:#fff url(/images/badges/slog-fan-2013.gif) right bottom no-repeat;
  }
div.commentText blockquote {
  color: #111;
  border-left:4px solid #e4f8b5;
  background:#f7f6ef;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  line-height: 1.5em;
  margin: 10px auto;
  padding:5px 15px;
  width: 75%;
}
div.commentText h4 {
  color: #427A1A;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  text-align: left;
}
div.ratingGraphic img {
  margin-bottom: 2px;
  width: 10px;
  height: 10px;
}
div.commentText a.commentNumber,
a.commentNumber {
  float: right;
  font-size: 18px;
  margin: -7px -5px 5px 5px;
}
div.commentsHeader form,
p.showing, 
p.jump {
  font-size:.9em;
  padding-left:9px;
  text-align:left;
}
div.commentText a.avatarLink,
div.commentText span.avatarLink {
  float:left;
  margin:5px 5px 0 0;
}
/* ------------------------------------------------------------------------ */
/* Pulled Comments */
/* ------------------------------------------------------------------------ */
div.pulled.comment {
  margin:0;
  padding:0 6px;
  position:relative;
}
div.pulled div.commentText {
  background: #f8f8f8;
  color: #999;
  font-size: .9em;
  padding: 9px 7px;
}
div.pulled a,
div.pulled div.commentText a {
  color: #999;
}
div.pulled div.commentText a.commentNumber {
  color: #666;
  font-size:1em;
  font-weight:bold;
  position:absolute;
  right:27px;
  text-decoration:none;
}
div.pulled div.timeStamp {
  color: #999;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 10px;
  padding: 5px 0 0 45px;
}
div.pulled div.commentByline {
  color: #999;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 10px;
  padding: 10px 5px 0px;
}
div.pulled blockquote {
  background: #fff;
  border: 1px solid #ccc;
  color: #999;
  font-family: inherit;
  font-size: inherit;
  padding: 5px;
  margin: 5px;
  width: 95%;
}
div.pulled hr {
  margin: 11px 0;
}
a.reasonPulledToggler {
  background: #f8f8f8;
  color:#999;
  display:inline;
  margin:3px;
  padding:3px;
  text-decoration:none;
}
div.pulled a.policyToggler {
  float:none;
  font-size:.9em;
  text-decoration:underline;
}
div.commentText div.policy {
  font-style:italic;
}
div.pulledCommentGroupToggler {
  background: #f8f8f8 url(/images/icons/comment-toggle-uncollapse.gif) no-repeat 3px center;
  color:#999;
  cursor:pointer;
  display:block;
  font-size:0.9em;
  font-weight:bold;
  margin:1.5em;
  overflow:hidden;
  padding:7px 7px 7px 23px;
  text-align:left;
}
span.pulledCommentGroupNumbers {
  color:#666;
  float:right;
  font-weight:bold;
}
/* ------------------------------------------------------------------------ */
/* Anonymous Comments */
/* ------------------------------------------------------------------------ */
div.anonymous div.commentText {
  background: #f8f8f8;
  color: #555;
  font-size: .9em;
  padding: 12px;
}
div.anonymous a.commentNumber {
  color: #666;
  text-decoration:none;
}
div.anonymous div.timeStamp {
  color: #666;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 10px;
  padding: 5px 0 0 45px;
}
div.anonymous blockquote {
  background: #fff;
  border: 1px solid #ccc;
  color: #555;
  font-family: inherit;
  font-size: inherit;
  padding: 5px;
  margin: 5px;
  width: 95%;
}
div.anonymous hr {
  margin: 11px 0;
}
div.anonymous .notice {
  background: #FFC;
  border:2px solid #FC0;
  margin:3px;
  padding:3px;
}
div.BrowseComments p.notice {
  background:#fff;
  border:2px solid #ccc;
  color:#666;
  margin:5px auto;
  padding:20px;
  text-align:center;
  width:80%
}

/* ------------------------------------------------------------------------ */
/* Comment Byline */
/* ------------------------------------------------------------------------ */

div.commentByline {
  background: transparent url(/images/icons/comment_tri.gif) no-repeat scroll 28px top;
  color:#666;
  font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  font-size: 10px;
  padding: 5px 0 0 45px;
  text-align:left;
}
div.comment.anonymous div.commentByline {
  background: transparent url(/images/icons/comment_tri_dim.gif) no-repeat scroll 28px top;
}
div.commentByline span.commentDate {
  color:#A7A9AC;
}
a.reportComment {
  color:#A7A9AC;
  text-decoration:none;
}
div.commentByline span.commentAuthor,
span.commentAuthor {
  color:#555;
  font-weight:bold;
}
div.commentByline span.commentAuthor.anonymous {
  color:#666;
  font-weight:normal;
}
div.commentByline a.commentAuthor {
  font-weight:bold;
}
div.commentByline a.memberWebsiteLink {
  border:none;
  height:11px;
  margin:0;
  padding:0;
  text-decoration:none;
  width:11px;
}
div.commentByline a.memberWebsiteLink:hover {
  text-decoration:none;
}
div.commentByline a.memberWebsiteLink img {
  background:url(/images/face/member-site-icon.gif) no-repeat;
  background-position: 0px 0px;
  height:12px;
  width:11px;
}
div.commentByline a.memberWebsiteLink img:hover {
  background-position: 0px -12px;
  height:12px;
  width:11px;
}


form#commentForm {
  border: 1px solid #0586b5;
  background: #e4f0f4;
  margin: 20px 0;
}
  .PromotionsBlogPost form#commentForm {
    border-color:#666;
    background:#bbb;
  }
form#commentForm h4 {
  background: #0586b5;
  color: #fff;
  padding: .3em;
}
  .PromotionsBlogPost form#commentForm h4 {
    background:#000;
  }
form#commentForm h4.commentFormAddHeader a {
  color: #fff;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  padding: 7px;
}
dl.formElements dt {
  clear: left;
  display: inline;
  float: left;
  min-height: 45px;
  text-align: left;
  width: 20%;
}
span.labelNotes,
dl.formElements dt span.labelNotes {
  color:#666;
  display:block;
  font-size:10px;
  margin:5px 0;
}
dl.formElements dd {
  width:75%;
}
dl.formElements dd textarea {
  width: 100%;
}
div#PostCommentProcessEdit.Content dl dt,
div#PostCommentProcessEdit.Content dl dd {
  margin:0;
  width:100%;
}
p.commentFormSubmit {
  margin: 0;
  padding: 20px 0;
  text-align: center;
}
.commentBody {
  line-height:1.4em;
}
.conciseText {
  border-bottom: 1px dashed #999;
  height: 21.4em; /* should be a multiple of div's line-height */
  overflow: hidden;
  position: relative;
}
a.conciseTextToggler {
  cursor: pointer;
  float: left;
  margin-top: 0px;
  padding: 2px;
}

/* ------------------------------------------------------------------------ */
/* POPUP SPECIFIC */
/* ------------------------------------------------------------------------ */
body#Comments.CommentPopup,
body.CommentPopup div#gridMain,
body.PostCommentPopUp div#gridMain {
  background: #ebeae8;
}
p.showing {
  display:none;
}
body.CommentPopup h4#commentsContentLink {
  font-size: 1.3em;
  font-weight: bold;
  margin: 7px;
}
body#Comments.CommentPopup div#gridMainColumn {
  width:420px;
}

/* ------------------------------------------------------------------------ */
/* PREVIEW SPECIFIC */
/* ------------------------------------------------------------------------ */
div#previewCommentComponent, 
div#editCommentComponent {
  padding: 20px;
}

div#previewCommentComponent h2 {
  color: #094760;
}

div#PostCommentProcessPreview,
div#PostCommentProcessEdit {
  background:#ebeae8;
  background:#F2F2F2;
  border-bottom-width:0;
  border:1px solid #ccc;
  color:#444;
  margin:10px 0 0;
  padding:10px;
}
div.errorDisplay,
div.errorMessage,
div#PostCommentProcessPreview div.errorDisplay,
div#PostCommentProcessPreview div.errorMessage {
  border:1px solid #ccc;
  margin:10px 0;
}

div.commentStatus {
  font-style: italic;
  margin-bottom:10px;
  padding: 0 20px 20px;
}

div.commentProcessTabs {
  border-bottom:2px solid #ccc;
  clear:both;
  margin:20px auto -1px; /* neg */
  width:400px;
}
div.commentProcessTabs a,
div.commentProcessTabs a.inactive {
  background-color:#d4dfe8;
  border:1px solid #ccc;
  border-top:2px solid #ccc;
  display:block;
  float:left;
  font-size:1.2em;
  margin-bottom:0; /* neg */
  margin-bottom:-1px;
  margin-top:3px;
  padding:7px 13px;
}
div.commentProcessTabs a.current {
  background-color:#dfebf4;
  border:2px solid #ccc;
  border-bottom:none;
  color:#000;
  font-size:1.3em;
  font-weight:bold;
  margin-bottom:-2px;
  margin-top:0;
  padding:9px 13px;
}
div.commentProcessTabs a.first {
  border-left:2px solid #ccc;
  margin-left:6px;
}
body#PostComment form.loginForm legend {
  display:none;
}
form.loginForm fieldset {
  border-top:none;
}
div.editComment {
  background: #f2f2f2;
  border:1px solid #ccc;
  border-bottom:none;
  margin-top:20px;
  padding:10px;
}
div.editComment dl dt {
  margin:0;
  min-height:45px;
  padding:0;
  text-align:left;
}
div.editComment dl dd {
  margin-top:5px;
}
body#PostComment div#gridMainColumn {
  width:600px;
}
body#PostComment.PostCommentPopUp div#gridMainColumn {
  width:420px;
}
div.comment.collapsed {
  margin:9px;
  padding:0 7px;
  padding-top:0;
  position:relative;
}
div.comment.collapsed span.commentNumber {
  font-weight:bold;
  position:absolute;
  right:12px;
  top:2px;
}
div.comment.collapsed a.collapsedCommentToggler {
  background:#f8f8f8 url(/images/icons/comment-toggle-uncollapse.gif) 3px no-repeat;
  color:#666;
  display:block;
  font-size:.9em;
  margin:10px auto;
  padding:7px 7px 7px 23px;
  height: 14px;
  text-align:left;
}
div.comment.collapsed a span.commentDate {
  color:#999;
}
/* ------------------------------------------------------------------------ */
/* COMMENT TOOLS */
/* ------------------------------------------------------------------------ */

div.commentsHeader div.commentViewControls {
  font-size:10px;
  margin:5px 0;
  padding:5px 0;
  text-align:center;
}

a.registeredOnLink,
a.registeredOnLink:hover,
a.registeredOnLink:active,
a.registeredOffLink,
a.registeredOffLink:hover,
a.registeredOffLink:active {
  background:url(/images/icons/comments-toggle-registered.gif) left top no-repeat;
  display:block;
  float:right;
  height:16px;
  margin:2px;
  padding:0;
  text-indent:-999em;
  width:88px;
}

a.unregisteredOnLink,
a.unregisteredOnLink:hover,
a.unregisteredOnLink:active,
a.unregisteredOffLink,
a.unregisteredOffLink:hover,
a.unregisteredOffLink:active {
  background:url(/images/icons/comments-toggle-unregistered.gif) left top no-repeat;
  display:block;
  float:right;
  height:16px;
  margin:2px;
  padding:0;
  text-indent:-999em;
  width:99px;
}

a.newestFirstLink,
a.newestFirstLink:hover,
a.newestFirstLink:active,
a.oldestFirstLink,
a.oldestFirstLink:hover,
a.oldestFirstLink:active {
  background:url(/images/icons/comments-toggle-sort.gif) left top no-repeat;
  display:block;
  float:right;
  height:16px;
  margin:2px;
  padding:0;
  text-indent:-999em;
  width:93px;
}
a.registeredOnLink:hover,
a.unregisteredOnLink:hover,
a.newestFirstLink:hover {
  background-position: 0 -16px;
}
a.registeredOffLink:active,
a.unregisteredOffLink:active,
a.oldestFirstLink:active {
  background-position: 0 -32px;
}
a.registeredOffLink,
a.unregisteredOffLink,
a.oldestFirstLink { 
  background-position: 0 -48px;
}
a.registeredOffLink:hover,
a.unregisteredOffLink:hover,
a.oldestFirstLink:hover {
  background-position: 0 -64px;
}
a.registeredOnLink:active,
a.unregisteredOnLink:active,
a.newestFirstLink:active {
  background-position: 0 -80px;
}
a.addCommentJump {
  background:url(/images/icons/add_comment.gif) left top no-repeat;
  float:left;
  height:16px;
  margin-left:3px;
  padding-left:23px;
}
/* ------------------------------------------------------------------------ */
/* LOCATION SPECIFIC */
/* ------------------------------------------------------------------------ */

body#template_Location div.BrowseComments {
  background:#ebeae8;
}
body#template_Location div.commentsHeader {
  margin-bottom:7px;
  padding-bottom:7px;
}
body#template_Location div.commentsHeader div.commentViewControls {
  clear:both;
  margin:9px 0;
}
/* some redundancy here to please IE. */
div#PostCommentProcessEdit {
  padding:15px;
}

body#template_Location div.commentsHeader {
  background:transparent;
}
div.ratingReminder {
  background:#FFC url(/images/backgrounds/comment-reminder-background.gif) no-repeat 5px 50%;
  border:1px solid #FC3;
  float:right;
  font-size:10px;
  padding:7px 35px;
  text-align:left;
  width:55%;
}
body#template_Location div.commentsHeader div.averageRatingGraphic {
  float:right;
  font-size:.9em;
  text-align:right;
}
body#template_Location div.commentsHeader div.averageRatingGraphic img {
  height:9px;
  margin:0px;
  padding:0px;
  width:13px;
}

body#template_Location div.commentsHeader h3,
div.editComment.Location div.commentsHeader h3 {
  background: url(/images/backgrounds/search_infobar.gif) repeat-x rgb(129, 163, 21);
  border: 1px solid rgb(163, 206, 28);
  clear: both;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0;
  padding: 5px 10px;
  position: relative;
  text-align: left;
}
p.jump,
p.showing {
  float:left;
  margin:9px;
  text-align:left;
}
div.commentFormRating {
  background: #fff url(/images/backgrounds/textfield-dropshadow.gif) repeat-x top left;
  border-bottom:1px solid #ddd;
  border-left: 1px solid #c3c3c3;
  border-right: 1px solid #c3c3c3;
  border-top:none;
  padding: 5px;
  text-align:center;
  width:95px;  
}

/* ------------------------------------------------------------------------ */
/* CONTENT SPECIFIC */
/* ------------------------------------------------------------------------ */
body#template_Content dl.formElements dt {
  min-height:1em;
  height:auto;
}
body#template_Content div#BrowseComments {
  background:#ebeae8;
  max-width:575px;
}
/* ------------------------------------------------------------------------ */
/* MOBILE SPECIFIC */
/* ------------------------------------------------------------------------ */

body#PostComment.PostCommentMobile div#gridMainColumn {
  padding:5px;
  width:auto;
}
body#PostComment.PostCommentMobile h1 {
  font-size:1.4em;
}
body#PostComment.PostCommentMobile h2 {
  font-size:1.2em;
}
body.BlogPostMobile div.commentsHeader {
  margin-bottom:9px;
  padding-bottom:5px;
}
body.BlogPostMobile div.commentsHeader a.feedLink {
  display:block;
  float:left;
  text-indent:-9999px;
  width:15px;
  height:15px;
}
/* ------------------------------------------------- */
/* Comment Pagination */
/* ------------------------------------------------- */
div#PaginationBottom.pagination {
  padding:0 20px;
}