1 files changed, 57 insertions, 12 deletions

diff --git a/css/style.css b/css/style.css
index 0e27c1e..113e061 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,7 +9,7 @@ body {
 }
 
 p {
-  margin-top: 1ex;
+  margin-top: .5ex;
   margin-bottom: 1ex;
   font-size: 1em;
 }
@@ -36,35 +36,73 @@ hr {
   margin-bottom: .9em;
 }
 
-
 #screen {
   position: absolute;
-  top: 35px; 
+  top: 40px; 
   right: 0; 
   left: 0; 
   bottom: 0;
 }
 
 #scroller {
-  max-width: 50em;
+  max-width: 680px;
   margin-right: auto;
   margin-left: auto;
 }
 
+@media only screen and (max-width: 480px) {
+  #screen { top: 57px; right: 5px; left: 5px; }
+}
+ 
 .right { float: right;}
 
+.banner {height: 10px; }
+
 .message, .profile {
   border: 1px solid #ddd;
   background: white;
-  margin-top: .5em;
   padding: .3em .5em;
+}
+
+.message {
+  margin-top: .5em;
   border-radius: 5px;
 }
 
-.message, .message > *, .navbar, .navbar > * {
+#scroller:last-child { margin-bottom: 10em; }
+
+.message, .message > *, .navbar, .navbar > *, #ad, #ad > *, #viewer > * {
   animation: fadein .5s;
 }
 
+#ad, #pm {
+  background: white;
+  font-size: .8em;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  position: fixed;
+  padding: .3em .5em; 
+  bottom: 5px;
+  width: 250px;
+}
+
+#ad {
+  left: 5px;
+}
+
+#pm {
+  right: 5px;
+}
+
+#ad button, #pm button {
+  font-size: .8em;
+  margin: 0;
+  padding: 0;
+  padding-left: 5px; padding-right: 5px;
+  position: absolute;
+  bottom: 2px; right: 2px;
+}
+
 @keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 1; }
@@ -146,7 +184,7 @@ textarea {
   position: fixed;
   z-index: 1000;
   margin: 0;
-  padding-top: .3em;
+  padding-top: .4em;
   padding-bottom: .3em;
   left: 0; right: 0;
   top: 0;
@@ -167,17 +205,18 @@ textarea {
 }
 
 form.search, input.search {
-  width: 100px;
+  width: 175px;
   float: right;
   margin: 0;
   padding: 0;
+  padding-left: .1em;
   color: #f5f5f5;
   background: #444;
   border-radius: 3px;
 }
 
 form.search {
-  margin-top: .3em;
+  margin-top: .20em;
 }
 
 .navbar li.right {
@@ -187,7 +226,6 @@ form.search {
   margin-right: 1.7em;
   float: right;
   list-style-type: none;
-  background: #333;
   border-radius: 100%;
 }
 
@@ -202,13 +240,20 @@ form.search {
   text-decoration: none;
 }
 
-.avatar { width: 25px; height: 25px; vertical-align: middle; border-radius: 5px; margin-right: .2em; }
+.profileAvatar { width: 95px; height: 95px; vertical-align: top; border-radius: 5px; object-fit: cover; margin-right: .25em; margin-bottom: .25em;}
+.avatar { width: 25px; height: 25px; vertical-align: middle; object-fit: cover; border-radius: 5px; margin-right: .5em; }
+
+.image { width: 75px; height: 75px; object-fit: cover; margin-right: .2em; border-radius: 5px; cursor: pointer;}
+
+#viewer {position: fixed; left: 2em; top: 3em; background: white; padding: .5em; border: 1px solid #ddd; border-radius: 5px;}
+
+#viewer img { border-radius: 5px; margin-left: auto; margin-right: auto; cursor: pointer;}
 
 button {
   display: inline-block;
   *display: inline;
   padding: 4px 12px;
-  margin-top: 0;
+  margin-top: 5px;
   margin-bottom: 0;
   *margin-left: .3em;
   font-size: 14px;