adding separator between headline and notification text

frontend/templates/notification/notice_template.html

@@ -16,9 +16,7 @@ tweet, FB, email sharing show up.  Include a {% url work your.local.work.id as w
 				{% endcomment %}
 			{% endblock %}
 		</div>
-		<div class="comments_graphical">
-			{% block comments_graphical %}
-				{% comment %}
+		<span class="comments_graphical">{% block comments_graphical %}{% comment %}
 				This is where you put your headline.
 				Brief text, graphics-oriented info like user avatars and campaign status icons.
 				e.g.:
@@ -29,19 +27,18 @@ tweet, FB, email sharing show up.  Include a {% url work your.local.work.id as w
 						<img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
 					{% endif %}
 				</a>
-				<span><a href="{{ supporter_url }}">{{ comment.user.username }}</a> on <a href="{{ work_url }}?tab=2">{{ comment.content_object.title }}</a></span>
-				{% endcomment %}
-			{% endblock %}
+				<span><a href="{{ supporter_url }}">{{ comment.user.username }}</a> on <a href="{{ work_url }}?tab=2">{{ comment.content_object.title }}</a></span>{% endcomment %}{% endblock %}
 				<br /><i>{% now "M d Y, h:i A"%}</i><br />
-		</div>
-		<div class="comments_textual">
+		</span>
+		<span class="comments_textual">
+		<hr />
 			{% block comments_textual %}
 				{% comment %}
 				This is where you put the textual part of your message.
 				Examples include the text of comments, details about credit card charges, etc.
 				{% endcomment %}
 			{% endblock %}
-		</div>
+		</span>
 	</div>
 	
 </div>

frontend/templates/notification/wishlist_successful/notice.html

@@ -5,10 +5,10 @@
 {% endblock %}
 
 {% block comments_graphical %}
-	Hooray!  We're going to give <a href="{% url work campaign.work.id %}">{{ campaign.work.title }}</a> to the world!
+Hooray!  We're going to give <a href="{% url work campaign.work.id %}">{{ campaign.work.title }}</a> to the world!
 {% endblock %}
 
 {% block comments_textual %}
-	A book on your wishlist, {{ campaign.work.title }}, has met its goal price of {{ campaign.target }}, thanks to the support of ungluers like you.  Unglue.it and the book's rights holder, {{ campaign.rightsholder }}, will be converting it to an unglued ebook edition and making it available for all the world to enjoy.  If you've asked us to in your <a href="/notification/settings/">notification settings</a>, we'll tell you when the unglued ebook is ready.<br /><br />
-	Thank you again!
+A book on your wishlist, {{ campaign.work.title }}, has met its goal price of {{ campaign.target }}, thanks to the support of ungluers like you.  Unglue.it and the book's rights holder, {{ campaign.rightsholder }}, will be converting it to an unglued ebook edition and making it available for all the world to enjoy.  If you've asked us to in your <a href="/notification/settings/">notification settings</a>, we'll tell you when the unglued ebook is ready.<br /><br />
+Thank you again!
 {% endblock %}

static/css/notices.css

@@ -133,28 +133,39 @@ input[type="submit"] {
   border: solid 3px #d6dde0;
   margin: 3px auto;
 }
+.comments hr {
+  margin: 10px auto 5px;
+  color: #d6dde0;
+  background-color: #d6dde0;
+  height: 2px;
+  border: 0;
+}
 .comments .comments_book {
   padding: 5px;
   border: solid 5px #EDF3F4;
-  margin: 5px;
+  margin-right: 10px;
+  margin-bottom: 10px;
   max-width: 80px;
 }
 .comments .comments_book img {
   max-width: 80px;
 }
 .comments .comments_textual {
-  margin: auto 5px 7px;
+  padding: 10px 5px 5px;
 }
 .comments .comments_textual div {
   margin-bottom: 5px;
 }
 .comments .comments_info {
   border-bottom: solid 1px #d6dde0;
+  padding: 5px;
 }
 .comments .comments_info div {
   float: left;
 }
 .comments .comments_info .comments_graphical {
-  margin: 5px;
-  padding-bottom: 5px;
+  padding: 5px auto;
+}
+.comments .comments_info span {
+  text-indent: 0;
 }

static/less/notices.less

@@ -51,9 +51,18 @@ input[type="submit"] {
 	border: solid 3px @blue-grey;
 	margin: 3px auto;
 	
+	hr {
+		margin: 10px auto 5px;
+		color: @blue-grey;
+		background-color: @blue-grey;
+		height:2px;
+		border: 0;
+	}
+			
 	.comments_book {
 		.mediaborder;
-		margin: 5px;
+		margin-right: 10px;
+		margin-bottom: 10px;
 		max-width: 80px;
 		
 		img {
@@ -62,7 +71,7 @@ input[type="submit"] {
 	}
 	
 	.comments_textual {
-		margin: auto 5px 7px;
+		padding: 10px 5px 5px;
 		
 		div {
 			margin-bottom: 5px;
@@ -71,15 +80,18 @@ input[type="submit"] {
 
 	.comments_info {	
 		border-bottom: solid 1px @blue-grey;
+		padding: 5px;
 
 		div {
 			float: left;
 		}
 		
 		.comments_graphical {
-			margin: 5px;
-			padding-bottom: 5px;
+			padding: 5px auto;
 		}
 
+		span {
+			text-indent: 0;
+		}		
 	}
 }