added workflow example

css/customstyles.css

@@ -1036,24 +1036,27 @@ table thead th code.highlighter-rouge {
 }
 
 
-.box, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12  {
-    padding: 15px;
+.box {
+    padding: 10px;
     border: 1px solid #888;
     box-shadow: 2px 2px 4px #dedede;
-    margin: 5px 5px;
     width: 100px;
     height: 80px;
     background-color: #f5f5f5;
     font-family: Arial;
     font-size: 12px;
     hyphens: auto;
+    float: left;
+    font-size: 12px;
+}
 
+.box:hover {
+    background-color: #f0f0f0;
 }
 
 #userMap {
-    max-width: 900px;
-    overflow-x: scroll;
-    overflow-y: hidden;
+    /*overflow-x: scroll;*/
+    /*overflow-y: hidden;*/
     padding: 20px;
 }
 
@@ -1067,16 +1070,39 @@ h2.userMapTitle {
     font-family: Arial;
 }
 
-#userMap table td {
-    vertical-align: middle;
-    font-size: x-large;
-}
-
 #userMap a:hover {
     text-decoration: none;
   }
 
-.box: hover {
-    background-color: #444444;
-    color: white;
+div.arrow {
+    max-width: 50px;
+    margin-left: 15px;
+    margin-right: 15px;
+    font-size: 20px;
 }
+
+div.content {
+    max-width: 110px
+}
+
+#userMap div.arrow, #userMap div.content {
+    float: left;
+}
+
+.clearfix {
+    clear: both;
+}
+
+
+#userMap div.arrow {
+    position: relative;
+    top: 30px;
+}
+
+.box1 {
+    margin-left:0px;
+}
+
+div.box.box1 {
+    margin-left: -20px;
+}