nasty big monolithic commit of a whole bunch of UI/UX improvements:

 - add a simple CSS template across the app for navigation & cosmetics
 - split login into login & register, and totally reskin it
 - restructure room CSS to play nicely with it
 - implement basis 1:1 chat from user pages
 - disable autofocus on iOS to improve UX

1 files changed, 165 insertions, 131 deletions

diff --git a/webclient/app.css b/webclient/app.css
index a5d0199bab..142e764ef1 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -1,122 +1,195 @@
-/*** Mobile voodoo ***/
-@media all and (max-device-width: 640px) {
-            
-    #messageTableWrapper {
-        margin-right: 0px ! important;
-    }
-    
-    .leftBlock {
-        width: 8em ! important;
-        font-size: 8px ! important;
-    }
-    
-    .rightBlock {
-        width: 0px ! important;
-        display: none ! important;
-    }
-    
-    .avatar {
-        width: 36px ! important;
-    }
-    
-    #header,
-    #messageTable,
-    #wrapper,
-    #roomName,
-    #controls {
-        max-width: 640px ! important;
-    }    
-    
-    #userIdCell,
-    #roomRecentsTableWrapper,
-    #usersTableWrapper,
-    #extraControls {
-        display: none;
-    }
-    
-    #buttonsCell {
-        width: 60px ! important;
-        padding-left: 20px ! important;
-    }
-    
-    #roomLogo {
-        display: none;
-    }
-    
-    #roomName {
-        text-align: left ! important;
-        top: -35px ! important;
-    }
-    
-    .bubble {
-        font-size: 12px ! important;
-        min-height: 20px ! important;
-    }
-    
-    #page {
-        top: 35px ! important;
-        bottom: 70px ! important;
-    }
-    
-    #header,
-    #page {
-        margin: 5px ! important;
-    }
-    
-    #header {
-        padding: 5px ! important;
-    }
-        
-    /* stop zoom on select */
-    select:focus,
-    textarea,
-    input
-    {
-        font-size: 16px ! important;
-    }
-    
+/** Common layout **/
+
+html {
+    height: 100%;
 }
 
 body {
+    height: 100%;
     font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
     font-size: 12pt;
     margin: 0px;
 }
 
 h1 {
-    font-family: Helvetica, Arial, sans-serif;
+    font-size: 20pt;
 }
 
-/*** Overall page layout ***/
+a:link    { color: #666; }
+a:visited { color: #666; }
+a:hover   { color: #000; }
+a:active  { color: #000; }
 
 #page {
-    position: absolute;
-    top: 80px;
-    bottom: 100px;
-    left: 0px;
-    right: 0px;
-    margin: 20px;
+    min-height: 100%;
+    margin-bottom: -32px; /* to make room for the footer */
 }
 
 #wrapper {
     margin: auto;
     max-width: 1280px;
     height: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
-#roomName {
+#header
+{
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    background-color: #333;
+    height: 32px;
+}
+
+#headerContent {
+    color: #ccc;
     max-width: 1280px;
+    margin: auto;
+    text-align: right;
+    height: 32px;
+    line-height: 32px;
+}
+
+#headerContent a:link,
+#headerContent a:visited,
+#headerContent a:hover,
+#headerContent a:active {
+    color: #fff;
+}
+
+#footer
+{
     width: 100%;
+    border-top: #666 1px solid;
+    background-color: #aaa;
+    height: 32px;
+}
+
+#footerContent
+{
+    font-size: 8pt;
+    color: #fff;
+    max-width: 1280px;
+    margin: auto;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+}
+
+#genericHeading
+{
+    margin-top: 13px;
+}
+
+#feedback {
+    color: #800;
+}
+
+.mouse-pointer {
+    cursor: pointer;
+}
+
+.invited {
+    opacity: 0.2;
+}
+
+/*** Login Pages ***/
+
+.loginWrapper {
+    text-align: center;
+}
+
+#loginForm {
+    text-align: left;
+    padding: 1em;
+    margin-bottom: 40px;
+    display: inline-block;
+    
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    
+    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    
+    background-color: #f8f8f8;
+    border: 1px #ccc solid;
+}
+
+#loginForm input[type='radio'] {
+    margin-right: 1em;
+}
+
+#serverConfig {
+    text-align: center;
+}
+
+#serverConfig,
+#serverConfig input,
+#serverConfig button
+{
+    font-size: 10pt ! important;
+}
+
+.smallPrint {
+    color: #888;
+    font-size: 9pt ! important;
+    font-style: italic ! important;
+}
+
+#serverConfig label {
+    display: inline-block;
     text-align: right;
-    top: -40px;
+    margin-right: 0.5em;
+    width: 7em;   
+}
+
+#loginForm,
+#loginForm input,
+#loginForm button,
+#loginForm select {
+    font-size: 18px;
+}
+
+/*** Room page ***/
+
+#roomPage {
     position: absolute;
+    top: 120px;
+    bottom: 120px;
+    left: 20px;
+    right: 20px;
+}
+
+#roomWrapper {
+    margin: auto;
+    max-width: 1280px;
+    height: 100%;
+}
+
+#roomName {
+    float: right;
     font-size: 16px;
+    margin-top: 15px;
+}
+
+#roomHeader {
+    margin: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 53px;
+    max-width: 1280px;
 }
 
 #controlPanel {
     position: absolute;
     bottom: 0px;
     width: 100%;
+    height: 100px;
     background-color: #f8f8f8;
     border-top: #aaa 1px solid;
 }
@@ -147,10 +220,6 @@ h1 {
     background-color: #faa;
 }
 
-.mouse-pointer {
-    cursor: pointer;
-}
-
 /*** Participant list ***/
 
 #usersTableWrapper {
@@ -409,11 +478,14 @@ h1 {
 }
 
 /*** Recents in the room page ***/
+
 #roomRecentsTableWrapper {
     float: left;
     max-width: 320px;
-    margin-right: 20px;
+    padding-right: 10px;
+    margin-right: 10px;
     height: 100%;
+    border-right: 1px solid #ddd;
     overflow-y: auto;
 }
 
@@ -434,46 +506,8 @@ h1 {
 }
 
 /*** User profile page ***/
+
 #user-displayname {
     font-size: 24px;
 }
-/******************************/
-
-#header
-{
-    padding: 20px;
-    max-width: 1280px;
-    margin: auto;
-}
-
-#logo,
-#roomLogo {
-    max-width: 1280px;
-    margin: auto;
-}
-
-#header-buttons {
-    float: right;
-}
-
-.text_entry_section {
-    position: fixed;
-    bottom: 0;
-    z-index: 100;
-    left: 0;
-    right: 10em;
-    width: 100%;
-    background: #e0e0e0;
-}
-
-.member_invited {
-    color: blue;
-}
 
-.member_joined {
-
-}
-
-.member_left {
-    color: gray;
-}