From 41f6420df0608c639af5bcfe286cc5c27562cdc1 Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 21 Dec 2016 16:05:41 -0700
Subject: [PATCH] help: Add Tip CSS.

This adds the CSS for a tip section. Utilizes the CSS ::before
pseudo-selector and fontawesome.
---
 static/styles/portico.css | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/static/styles/portico.css b/static/styles/portico.css
index 72d13871a2..c46ffd312d 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -1080,12 +1080,36 @@ a.bottom-signup-button {
     box-shadow: none;
 }
 
-.markdown .warn {
+.markdown .warn,
+.markdown .tip {
+    position: relative;
     display: block;
     background-color: #f5f7f9;
     border: 1px solid #eee;
     border-radius: 4px;
     padding: 10px;
+    margin-bottom: 10px;
+}
+
+.markdown .tip {
+    background-color: #fbf7ea;
+    border: 1px solid #e0ddd0;
+}
+
+.markdown .warn p,
+.markdown .tip p {
+    margin-bottom: 0;
+}
+
+.markdown .tip::before {
+    display: inline;
+    content: "\f0eb   Tip:  ";
+    font-family: FontAwesome, "Yantramanav";
+    font-weight: 600;
+}
+
+.markdown .tip p:first-of-type {
+    display: inline;
 }
 
 .markdown .indicator {