update docs to reflect addition of messages

docs.css

@@ -98,4 +98,26 @@ nav {
 	.row .col {
 		margin: 0;
 	}
-}
+}
+
+.krakenholder {
+	display: block;
+	width: 150px;
+	margin: auto;
+}
+
+.krakenholder:hover .kraken {
+	height: 0;
+}
+
+.krakenholder:hover:before {
+	position: relative;
+	display: block;
+	height: 150px;
+	text-align: center;
+	font-size: 40px;
+	line-height: 150px;
+	font-weight: bold;
+	background: red;
+	content: "ROAR";
+}

docs.html

@@ -176,11 +176,11 @@
 			<div>
 				<h1>Forms</h1>
 				<input type="text" class="smooth" placeholder="input type=&quot;text&quot;"><br><br>
-				<textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon-front&quot;">
+				<textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon">$</span><input type="text" class="smooth" placeholder="span class=&quot;addon&quot;">
 				<br><br>
 				<pre>&lt;input type="text" class="smooth"&gt;
 				<br>&lt;textarea rows="3" class="smooth"&gt;
-				<br>&lt;span class="addon-front"&gt;&lt;/span&gt;&lt;input type="text" class="smooth"&gt;</pre>
+				<br>&lt;span class="addon"&gt;&lt;/span&gt;&lt;input type="text" class="smooth"&gt;</pre>
 			</div>
 			
 			<div class="navbar">
@@ -308,6 +308,24 @@
 				<br>
 				<pre>&lt;h1&gt;Level One Heading&lt;/h1&gt;</pre>
 			</div>
+
+			<h1>Messages</h1>
+			<div class="messages">
+				<div class="msg">
+					<strong>Watch out!</strong> You almost scrolled off the page. There are reports of sea monsters past the end of the page and we do not advise you go there.
+				</div>
+				<pre>&lt;div class="msg"&gt;
+	&lt;strong&gt;Alert headline!&lt;/strong&gt;
+	Message text
+&lt;/div&gt;
+	</pre>
+			</div>
+			<br>
+			
+			<div class="krakenholder">
+				<img src="kraken.png" class="kraken" alt="a scary sea monster">
+			</div>
+
 			<br>
 
 			<script type="text/javascript">