Beautiful lines

css/glowingbear.css

@@ -18,6 +18,18 @@ body {
 #footer {
     height: 25px;
 }
+.horizontal-line {
+-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
+   -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
+        box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
+    border-bottom: 1px solid #121212;
+}
+.vertical-line {
+-webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
+   -moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
+        box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
+        border-right: 1px solid #121212;
+}
 
 input#sendMessage {
     border: 0;
@@ -40,7 +52,6 @@ td.prefix {
     vertical-align: top;
     padding-right: 5px;
     white-space: nowrap;
-    border-right: 1px solid #555;
 }
 td.message {
     word-wrap: break-word;

index.html

@@ -125,7 +125,7 @@
       </div>
     </div>
     <div class="content" ng-show="connected">
-      <div id="topbar">
+      <div id="topbar" class="horizontal-line">
             <div class="brand">
               <img alt="brand" src="img/favicon.png">
             </div>
@@ -156,7 +156,7 @@
               </a>
             </div>
       </div>
-      <div id="sidebar">
+      <div id="sidebar" class="vertical-line">
         <ul class="nav nav-pills nav-stacked">
           <li class="bufferfilter">
             <form role="form">
@@ -181,7 +181,7 @@
                   {{ bufferline.date | date:'HH:mm' }}
                 </span>
               </td>
-              <td class="prefix">
+              <td class="prefix vertical-line">
                 <span ng-repeat="part in bufferline.prefix" class="text" style="{{ part.fg }}">{{ part.text }}</span>
               </td>
               <td class="message">