More layout and customisations.

static/css/site.css

@@ -1,3 +1,5 @@
+@import "topbar.css";
+
 body { font-family: Arial, sans-serif; margin: 0px; }
 table { border-collapse: collapse; width: 100%; margin-top: 20px; }
 th, td { padding: 8px 12px; border: 1px solid #ddd; text-align: center; }
@@ -15,23 +17,6 @@ th { background-color: #f5f5f5; }
 }
 .flash { padding: 10px; color: green; background: #e9ffe9; border: 1px solid #c3e6c3; margin-bottom: 15px; }
 
-.dropdown-admin-box {
-  min-width: 350px;
-}
-
-.dropdown-notification-box {
-  min-width: 350px;
-}
-
-.dropdown-message-box {
-  min-width: 350px;
-}
-
-.btn-xs {
-  padding: 2px 6px;
-  font-size: 0.75rem;
-  line-height: 1;
-}
 
 /* Ball Stuff */
 .ball {

static/css/topbar.css

@@ -0,0 +1,50 @@
+.dropdown-admin-box {
+    min-width: 350px;
+  }
+  
+  .dropdown-notification-box {
+    min-width: 350px;
+  }
+  
+  .dropdown-message-box {
+    min-width: 350px;
+  }
+  
+  .dropdown-with-arrow::before {
+    content: "";
+    position: absolute;
+    top: -8px;
+    right: 3.5px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid white;
+    z-index: 1;
+  }
+  
+  .dropdown-with-arrow::after {
+    content: "";
+    position: absolute;
+    top: -9px;
+    right: 3.5px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid rgba(0, 0, 0, 0.15);
+    z-index: 0;
+  }
+  
+.btn-xs {
+    padding: 2px 6px;
+    font-size: 0.75rem;
+    line-height: 1;
+}
+  
+.badge-small {
+    font-size: 0.9rem;
+    padding: 2px 5px;
+    line-height: 1;
+    transform: translate(-50%, -50%);
+}