diff --git a/_includes/head.html b/_includes/head.html
index 6b1dcbd..3a5ee60 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -18,6 +18,7 @@
   <!--<link rel="stylesheet" href="/public/css/syntax.css">-->
   <link rel="stylesheet" href="/public/css/pygments.css">
   <link rel="stylesheet" href="/public/css/hyde.css">
+  <link rel="stylesheet" href="/public/css/additional.css">
 
   <link rel="stylesheet" href="/public/css/gh-fork-ribbon.css">
   <!--[if lt IE 9]>
@@ -25,10 +26,11 @@
   <![endif]-->
 
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 
   <!-- Icons -->
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
-                                 <link rel="shortcut icon" href="/public/favicon.ico">
+   <link rel="shortcut icon" href="/public/favicon.ico">
 
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/examples/01-PageObject.md b/examples/01-PageObject.md
index ceda8cc..e8abe37 100644
--- a/examples/01-PageObject.md
+++ b/examples/01-PageObject.md
@@ -41,7 +41,7 @@ Page with login box and currency selector.
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/examples/02-HtmlElements.md b/examples/02-HtmlElements.md
index e140805..f4d54a1 100644
--- a/examples/02-HtmlElements.md
+++ b/examples/02-HtmlElements.md
@@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/examples/03-BEM.md b/examples/03-BEM.md
index 67425cf..e42882a 100644
--- a/examples/03-BEM.md
+++ b/examples/03-BEM.md
@@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si
 
 The Page Factory needs to be created only once per Mink session.
 
-<p class="message">
+<p class="warning">
     Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
 </p>
 
diff --git a/format.md b/format.md
new file mode 100644
index 0000000..b62b998
--- /dev/null
+++ b/format.md
@@ -0,0 +1,159 @@
+---
+layout:     page
+title:      Formatting
+---
+
+# Example Heading Level 1
+## This are warnings
+
+Some text which might me long or short. With followed example PHP code.
+
+<p class="warning round">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning round pastel">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning round pastel border">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel border">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning round pastel border icon-black">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="warning pastel border icon-black">
+    This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
+## This are info
+
+Now even more text and code
+
+<p class="info round">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info round pastel">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info round pastel border">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel border">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info round pastel border icon-black">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="info pastel border icon-black">
+    This is some info message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
+## Are those notes?
+
+Even more to say.
+
+<p class="note round">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note round pastel">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note round pastel border">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel border">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note round pastel border version2 icon-black">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+<p class="note pastel border version2 icon-black">
+    This is some note message with some embedded code <code>getPage</code> for which we have something to say.
+</p>
+
+```php
+<?php
+
+class Test
+{
+	public function doSomething(array $data)
+	{
+		foreach ( $data as &$entry ) {
+			$entry .= '.';
+		}
+	}
+}
+?>
+```
+
diff --git a/public/css/additional.css b/public/css/additional.css
new file mode 100644
index 0000000..0df61e7
--- /dev/null
+++ b/public/css/additional.css
@@ -0,0 +1,100 @@
+.note,
+.warning,
+.info {
+	padding: 10px 10px 10px 40px;
+
+	margin: 10px 0;
+}
+
+.round {
+	border-radius: 6px;
+}
+
+
+.border {
+	border: 1px dashed #353535;
+}
+
+.note:before,
+.warning:before,
+.info:before {
+	display: block;
+	float: left;
+	margin-left: -30px;
+	margin-top: 2px;
+
+	font-family: FontAwesome;
+
+	width: 20px;
+	height: 18px;
+
+	font-size: 18px;
+
+	text-align: center;
+}
+
+.note.icon-black:before,
+.warning.icon-black:before,
+.info.icon-black:before {
+	color: black;
+}
+
+.note {
+	background: #e6ab0c;
+	color: white;
+}
+
+.note.pastel.version2 {
+	background-color: rgba(255, 255, 0, 0.65);
+}
+
+.note.pastel {
+	background-color: rgba(230, 198, 12, 0.6);
+	/*background-color: #e6c60c;*/
+	color: #353535;
+}
+
+.note:before {
+	content: "\f071";
+}
+
+.warning {
+	color: white;
+	background: #D8000C;
+}
+
+.warning.pastel {
+	/*background-color: #d8655f;*/
+	background-color: rgba(255, 60, 0, 0.40);
+	color: #353535;
+}
+
+.warning:before {
+	content: "\f06a";
+}
+
+.info {
+	color: white;
+	background: #00529B;
+}
+
+.info.pastel {
+	background-color: rgba(0, 100, 255, 0.30);
+	color: #353535;
+}
+
+.info:before {
+	content: "\f05a";
+}
+
+.lead {
+	margin-bottom: 2rem;
+}
+
+.sidebar-nav {
+	margin-bottom: 2rem;
+}
+
+.sidebar a {
+	text-shadow: 1px 1px 1px #408DB5;
+}
\ No newline at end of file