More CSS/styling updates

- Remove currently unused pure modules (forms and menus)
- Update forms (not all yet) markup and css
- Move all controlbox mockups to mockup/controlbox.html

Forms look much better now in mockups but JS and templates still needs updating.

css/converse.css

@@ -431,12 +431,6 @@
   Licensed under the BSD License.
   https://github.com/yahoo/pure/blob/master/LICENSE.md
   */
-  /*!
-  Pure v0.6.1-pre
-  Copyright 2014 Yahoo! Inc. All rights reserved.
-  Licensed under the BSD License.
-  https://github.com/yahoo/pure/blob/master/LICENSE.md
-  */
   /*csslint box-model:false*/
   /*
   Box-model set to false because we're setting a height on select elements, which
@@ -477,20 +471,6 @@
   /* Firefox: Get rid of the inner focus border */
   /*csslint outline-none:false*/
   /* Firefox: Get rid of the inner focus border */
-  /*!
-  Pure v0.6.1-pre
-  Copyright 2014 Yahoo! Inc. All rights reserved.
-  Licensed under the BSD License.
-  https://github.com/yahoo/pure/blob/master/LICENSE.md
-  */
-  /*csslint adjoining-classes: false, box-model:false*/
-  /* HORIZONTAL MENU */
-  /* Initial menus should be inline-block so that they are horizontal */
-  /* Submenus should still be display: block; */
-  /* Vertical Menus - show the dropdown arrow */
-  /* Horizontal Menus - show the dropdown arrow */
-  /* scrollable menus */
-  /* misc default styling */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
@@ -654,626 +634,6 @@
     max-width: 100%;
     height: auto;
     display: block; }
-  @media screen and (min-width: 35.5em) {
-    #conversejs .pure-u-sm-1,
-    #conversejs .pure-u-sm-1-1,
-    #conversejs .pure-u-sm-1-2,
-    #conversejs .pure-u-sm-1-3,
-    #conversejs .pure-u-sm-2-3,
-    #conversejs .pure-u-sm-1-4,
-    #conversejs .pure-u-sm-3-4,
-    #conversejs .pure-u-sm-1-5,
-    #conversejs .pure-u-sm-2-5,
-    #conversejs .pure-u-sm-3-5,
-    #conversejs .pure-u-sm-4-5,
-    #conversejs .pure-u-sm-5-5,
-    #conversejs .pure-u-sm-1-6,
-    #conversejs .pure-u-sm-5-6,
-    #conversejs .pure-u-sm-1-8,
-    #conversejs .pure-u-sm-3-8,
-    #conversejs .pure-u-sm-5-8,
-    #conversejs .pure-u-sm-7-8,
-    #conversejs .pure-u-sm-1-12,
-    #conversejs .pure-u-sm-5-12,
-    #conversejs .pure-u-sm-7-12,
-    #conversejs .pure-u-sm-11-12,
-    #conversejs .pure-u-sm-1-24,
-    #conversejs .pure-u-sm-2-24,
-    #conversejs .pure-u-sm-3-24,
-    #conversejs .pure-u-sm-4-24,
-    #conversejs .pure-u-sm-5-24,
-    #conversejs .pure-u-sm-6-24,
-    #conversejs .pure-u-sm-7-24,
-    #conversejs .pure-u-sm-8-24,
-    #conversejs .pure-u-sm-9-24,
-    #conversejs .pure-u-sm-10-24,
-    #conversejs .pure-u-sm-11-24,
-    #conversejs .pure-u-sm-12-24,
-    #conversejs .pure-u-sm-13-24,
-    #conversejs .pure-u-sm-14-24,
-    #conversejs .pure-u-sm-15-24,
-    #conversejs .pure-u-sm-16-24,
-    #conversejs .pure-u-sm-17-24,
-    #conversejs .pure-u-sm-18-24,
-    #conversejs .pure-u-sm-19-24,
-    #conversejs .pure-u-sm-20-24,
-    #conversejs .pure-u-sm-21-24,
-    #conversejs .pure-u-sm-22-24,
-    #conversejs .pure-u-sm-23-24,
-    #conversejs .pure-u-sm-24-24 {
-      display: inline-block;
-      *display: inline;
-      zoom: 1;
-      letter-spacing: normal;
-      word-spacing: normal;
-      vertical-align: top;
-      text-rendering: auto; }
-    #conversejs .pure-u-sm-1-24 {
-      width: 4.1667%;
-      *width: 4.1357%; }
-    #conversejs .pure-u-sm-1-12,
-    #conversejs .pure-u-sm-2-24 {
-      width: 8.3333%;
-      *width: 8.3023%; }
-    #conversejs .pure-u-sm-1-8,
-    #conversejs .pure-u-sm-3-24 {
-      width: 12.5000%;
-      *width: 12.4690%; }
-    #conversejs .pure-u-sm-1-6,
-    #conversejs .pure-u-sm-4-24 {
-      width: 16.6667%;
-      *width: 16.6357%; }
-    #conversejs .pure-u-sm-1-5 {
-      width: 20%;
-      *width: 19.9690%; }
-    #conversejs .pure-u-sm-5-24 {
-      width: 20.8333%;
-      *width: 20.8023%; }
-    #conversejs .pure-u-sm-1-4,
-    #conversejs .pure-u-sm-6-24 {
-      width: 25%;
-      *width: 24.9690%; }
-    #conversejs .pure-u-sm-7-24 {
-      width: 29.1667%;
-      *width: 29.1357%; }
-    #conversejs .pure-u-sm-1-3,
-    #conversejs .pure-u-sm-8-24 {
-      width: 33.3333%;
-      *width: 33.3023%; }
-    #conversejs .pure-u-sm-3-8,
-    #conversejs .pure-u-sm-9-24 {
-      width: 37.5000%;
-      *width: 37.4690%; }
-    #conversejs .pure-u-sm-2-5 {
-      width: 40%;
-      *width: 39.9690%; }
-    #conversejs .pure-u-sm-5-12,
-    #conversejs .pure-u-sm-10-24 {
-      width: 41.6667%;
-      *width: 41.6357%; }
-    #conversejs .pure-u-sm-11-24 {
-      width: 45.8333%;
-      *width: 45.8023%; }
-    #conversejs .pure-u-sm-1-2,
-    #conversejs .pure-u-sm-12-24 {
-      width: 50%;
-      *width: 49.9690%; }
-    #conversejs .pure-u-sm-13-24 {
-      width: 54.1667%;
-      *width: 54.1357%; }
-    #conversejs .pure-u-sm-7-12,
-    #conversejs .pure-u-sm-14-24 {
-      width: 58.3333%;
-      *width: 58.3023%; }
-    #conversejs .pure-u-sm-3-5 {
-      width: 60%;
-      *width: 59.9690%; }
-    #conversejs .pure-u-sm-5-8,
-    #conversejs .pure-u-sm-15-24 {
-      width: 62.5000%;
-      *width: 62.4690%; }
-    #conversejs .pure-u-sm-2-3,
-    #conversejs .pure-u-sm-16-24 {
-      width: 66.6667%;
-      *width: 66.6357%; }
-    #conversejs .pure-u-sm-17-24 {
-      width: 70.8333%;
-      *width: 70.8023%; }
-    #conversejs .pure-u-sm-3-4,
-    #conversejs .pure-u-sm-18-24 {
-      width: 75%;
-      *width: 74.9690%; }
-    #conversejs .pure-u-sm-19-24 {
-      width: 79.1667%;
-      *width: 79.1357%; }
-    #conversejs .pure-u-sm-4-5 {
-      width: 80%;
-      *width: 79.9690%; }
-    #conversejs .pure-u-sm-5-6,
-    #conversejs .pure-u-sm-20-24 {
-      width: 83.3333%;
-      *width: 83.3023%; }
-    #conversejs .pure-u-sm-7-8,
-    #conversejs .pure-u-sm-21-24 {
-      width: 87.5000%;
-      *width: 87.4690%; }
-    #conversejs .pure-u-sm-11-12,
-    #conversejs .pure-u-sm-22-24 {
-      width: 91.6667%;
-      *width: 91.6357%; }
-    #conversejs .pure-u-sm-23-24 {
-      width: 95.8333%;
-      *width: 95.8023%; }
-    #conversejs .pure-u-sm-1,
-    #conversejs .pure-u-sm-1-1,
-    #conversejs .pure-u-sm-5-5,
-    #conversejs .pure-u-sm-24-24 {
-      width: 100%; } }
-  @media screen and (min-width: 48em) {
-    #conversejs .pure-u-md-1,
-    #conversejs .pure-u-md-1-1,
-    #conversejs .pure-u-md-1-2,
-    #conversejs .pure-u-md-1-3,
-    #conversejs .pure-u-md-2-3,
-    #conversejs .pure-u-md-1-4,
-    #conversejs .pure-u-md-3-4,
-    #conversejs .pure-u-md-1-5,
-    #conversejs .pure-u-md-2-5,
-    #conversejs .pure-u-md-3-5,
-    #conversejs .pure-u-md-4-5,
-    #conversejs .pure-u-md-5-5,
-    #conversejs .pure-u-md-1-6,
-    #conversejs .pure-u-md-5-6,
-    #conversejs .pure-u-md-1-8,
-    #conversejs .pure-u-md-3-8,
-    #conversejs .pure-u-md-5-8,
-    #conversejs .pure-u-md-7-8,
-    #conversejs .pure-u-md-1-12,
-    #conversejs .pure-u-md-5-12,
-    #conversejs .pure-u-md-7-12,
-    #conversejs .pure-u-md-11-12,
-    #conversejs .pure-u-md-1-24,
-    #conversejs .pure-u-md-2-24,
-    #conversejs .pure-u-md-3-24,
-    #conversejs .pure-u-md-4-24,
-    #conversejs .pure-u-md-5-24,
-    #conversejs .pure-u-md-6-24,
-    #conversejs .pure-u-md-7-24,
-    #conversejs .pure-u-md-8-24,
-    #conversejs .pure-u-md-9-24,
-    #conversejs .pure-u-md-10-24,
-    #conversejs .pure-u-md-11-24,
-    #conversejs .pure-u-md-12-24,
-    #conversejs .pure-u-md-13-24,
-    #conversejs .pure-u-md-14-24,
-    #conversejs .pure-u-md-15-24,
-    #conversejs .pure-u-md-16-24,
-    #conversejs .pure-u-md-17-24,
-    #conversejs .pure-u-md-18-24,
-    #conversejs .pure-u-md-19-24,
-    #conversejs .pure-u-md-20-24,
-    #conversejs .pure-u-md-21-24,
-    #conversejs .pure-u-md-22-24,
-    #conversejs .pure-u-md-23-24,
-    #conversejs .pure-u-md-24-24 {
-      display: inline-block;
-      *display: inline;
-      zoom: 1;
-      letter-spacing: normal;
-      word-spacing: normal;
-      vertical-align: top;
-      text-rendering: auto; }
-    #conversejs .pure-u-md-1-24 {
-      width: 4.1667%;
-      *width: 4.1357%; }
-    #conversejs .pure-u-md-1-12,
-    #conversejs .pure-u-md-2-24 {
-      width: 8.3333%;
-      *width: 8.3023%; }
-    #conversejs .pure-u-md-1-8,
-    #conversejs .pure-u-md-3-24 {
-      width: 12.5000%;
-      *width: 12.4690%; }
-    #conversejs .pure-u-md-1-6,
-    #conversejs .pure-u-md-4-24 {
-      width: 16.6667%;
-      *width: 16.6357%; }
-    #conversejs .pure-u-md-1-5 {
-      width: 20%;
-      *width: 19.9690%; }
-    #conversejs .pure-u-md-5-24 {
-      width: 20.8333%;
-      *width: 20.8023%; }
-    #conversejs .pure-u-md-1-4,
-    #conversejs .pure-u-md-6-24 {
-      width: 25%;
-      *width: 24.9690%; }
-    #conversejs .pure-u-md-7-24 {
-      width: 29.1667%;
-      *width: 29.1357%; }
-    #conversejs .pure-u-md-1-3,
-    #conversejs .pure-u-md-8-24 {
-      width: 33.3333%;
-      *width: 33.3023%; }
-    #conversejs .pure-u-md-3-8,
-    #conversejs .pure-u-md-9-24 {
-      width: 37.5000%;
-      *width: 37.4690%; }
-    #conversejs .pure-u-md-2-5 {
-      width: 40%;
-      *width: 39.9690%; }
-    #conversejs .pure-u-md-5-12,
-    #conversejs .pure-u-md-10-24 {
-      width: 41.6667%;
-      *width: 41.6357%; }
-    #conversejs .pure-u-md-11-24 {
-      width: 45.8333%;
-      *width: 45.8023%; }
-    #conversejs .pure-u-md-1-2,
-    #conversejs .pure-u-md-12-24 {
-      width: 50%;
-      *width: 49.9690%; }
-    #conversejs .pure-u-md-13-24 {
-      width: 54.1667%;
-      *width: 54.1357%; }
-    #conversejs .pure-u-md-7-12,
-    #conversejs .pure-u-md-14-24 {
-      width: 58.3333%;
-      *width: 58.3023%; }
-    #conversejs .pure-u-md-3-5 {
-      width: 60%;
-      *width: 59.9690%; }
-    #conversejs .pure-u-md-5-8,
-    #conversejs .pure-u-md-15-24 {
-      width: 62.5000%;
-      *width: 62.4690%; }
-    #conversejs .pure-u-md-2-3,
-    #conversejs .pure-u-md-16-24 {
-      width: 66.6667%;
-      *width: 66.6357%; }
-    #conversejs .pure-u-md-17-24 {
-      width: 70.8333%;
-      *width: 70.8023%; }
-    #conversejs .pure-u-md-3-4,
-    #conversejs .pure-u-md-18-24 {
-      width: 75%;
-      *width: 74.9690%; }
-    #conversejs .pure-u-md-19-24 {
-      width: 79.1667%;
-      *width: 79.1357%; }
-    #conversejs .pure-u-md-4-5 {
-      width: 80%;
-      *width: 79.9690%; }
-    #conversejs .pure-u-md-5-6,
-    #conversejs .pure-u-md-20-24 {
-      width: 83.3333%;
-      *width: 83.3023%; }
-    #conversejs .pure-u-md-7-8,
-    #conversejs .pure-u-md-21-24 {
-      width: 87.5000%;
-      *width: 87.4690%; }
-    #conversejs .pure-u-md-11-12,
-    #conversejs .pure-u-md-22-24 {
-      width: 91.6667%;
-      *width: 91.6357%; }
-    #conversejs .pure-u-md-23-24 {
-      width: 95.8333%;
-      *width: 95.8023%; }
-    #conversejs .pure-u-md-1,
-    #conversejs .pure-u-md-1-1,
-    #conversejs .pure-u-md-5-5,
-    #conversejs .pure-u-md-24-24 {
-      width: 100%; } }
-  @media screen and (min-width: 64em) {
-    #conversejs .pure-u-lg-1,
-    #conversejs .pure-u-lg-1-1,
-    #conversejs .pure-u-lg-1-2,
-    #conversejs .pure-u-lg-1-3,
-    #conversejs .pure-u-lg-2-3,
-    #conversejs .pure-u-lg-1-4,
-    #conversejs .pure-u-lg-3-4,
-    #conversejs .pure-u-lg-1-5,
-    #conversejs .pure-u-lg-2-5,
-    #conversejs .pure-u-lg-3-5,
-    #conversejs .pure-u-lg-4-5,
-    #conversejs .pure-u-lg-5-5,
-    #conversejs .pure-u-lg-1-6,
-    #conversejs .pure-u-lg-5-6,
-    #conversejs .pure-u-lg-1-8,
-    #conversejs .pure-u-lg-3-8,
-    #conversejs .pure-u-lg-5-8,
-    #conversejs .pure-u-lg-7-8,
-    #conversejs .pure-u-lg-1-12,
-    #conversejs .pure-u-lg-5-12,
-    #conversejs .pure-u-lg-7-12,
-    #conversejs .pure-u-lg-11-12,
-    #conversejs .pure-u-lg-1-24,
-    #conversejs .pure-u-lg-2-24,
-    #conversejs .pure-u-lg-3-24,
-    #conversejs .pure-u-lg-4-24,
-    #conversejs .pure-u-lg-5-24,
-    #conversejs .pure-u-lg-6-24,
-    #conversejs .pure-u-lg-7-24,
-    #conversejs .pure-u-lg-8-24,
-    #conversejs .pure-u-lg-9-24,
-    #conversejs .pure-u-lg-10-24,
-    #conversejs .pure-u-lg-11-24,
-    #conversejs .pure-u-lg-12-24,
-    #conversejs .pure-u-lg-13-24,
-    #conversejs .pure-u-lg-14-24,
-    #conversejs .pure-u-lg-15-24,
-    #conversejs .pure-u-lg-16-24,
-    #conversejs .pure-u-lg-17-24,
-    #conversejs .pure-u-lg-18-24,
-    #conversejs .pure-u-lg-19-24,
-    #conversejs .pure-u-lg-20-24,
-    #conversejs .pure-u-lg-21-24,
-    #conversejs .pure-u-lg-22-24,
-    #conversejs .pure-u-lg-23-24,
-    #conversejs .pure-u-lg-24-24 {
-      display: inline-block;
-      *display: inline;
-      zoom: 1;
-      letter-spacing: normal;
-      word-spacing: normal;
-      vertical-align: top;
-      text-rendering: auto; }
-    #conversejs .pure-u-lg-1-24 {
-      width: 4.1667%;
-      *width: 4.1357%; }
-    #conversejs .pure-u-lg-1-12,
-    #conversejs .pure-u-lg-2-24 {
-      width: 8.3333%;
-      *width: 8.3023%; }
-    #conversejs .pure-u-lg-1-8,
-    #conversejs .pure-u-lg-3-24 {
-      width: 12.5000%;
-      *width: 12.4690%; }
-    #conversejs .pure-u-lg-1-6,
-    #conversejs .pure-u-lg-4-24 {
-      width: 16.6667%;
-      *width: 16.6357%; }
-    #conversejs .pure-u-lg-1-5 {
-      width: 20%;
-      *width: 19.9690%; }
-    #conversejs .pure-u-lg-5-24 {
-      width: 20.8333%;
-      *width: 20.8023%; }
-    #conversejs .pure-u-lg-1-4,
-    #conversejs .pure-u-lg-6-24 {
-      width: 25%;
-      *width: 24.9690%; }
-    #conversejs .pure-u-lg-7-24 {
-      width: 29.1667%;
-      *width: 29.1357%; }
-    #conversejs .pure-u-lg-1-3,
-    #conversejs .pure-u-lg-8-24 {
-      width: 33.3333%;
-      *width: 33.3023%; }
-    #conversejs .pure-u-lg-3-8,
-    #conversejs .pure-u-lg-9-24 {
-      width: 37.5000%;
-      *width: 37.4690%; }
-    #conversejs .pure-u-lg-2-5 {
-      width: 40%;
-      *width: 39.9690%; }
-    #conversejs .pure-u-lg-5-12,
-    #conversejs .pure-u-lg-10-24 {
-      width: 41.6667%;
-      *width: 41.6357%; }
-    #conversejs .pure-u-lg-11-24 {
-      width: 45.8333%;
-      *width: 45.8023%; }
-    #conversejs .pure-u-lg-1-2,
-    #conversejs .pure-u-lg-12-24 {
-      width: 50%;
-      *width: 49.9690%; }
-    #conversejs .pure-u-lg-13-24 {
-      width: 54.1667%;
-      *width: 54.1357%; }
-    #conversejs .pure-u-lg-7-12,
-    #conversejs .pure-u-lg-14-24 {
-      width: 58.3333%;
-      *width: 58.3023%; }
-    #conversejs .pure-u-lg-3-5 {
-      width: 60%;
-      *width: 59.9690%; }
-    #conversejs .pure-u-lg-5-8,
-    #conversejs .pure-u-lg-15-24 {
-      width: 62.5000%;
-      *width: 62.4690%; }
-    #conversejs .pure-u-lg-2-3,
-    #conversejs .pure-u-lg-16-24 {
-      width: 66.6667%;
-      *width: 66.6357%; }
-    #conversejs .pure-u-lg-17-24 {
-      width: 70.8333%;
-      *width: 70.8023%; }
-    #conversejs .pure-u-lg-3-4,
-    #conversejs .pure-u-lg-18-24 {
-      width: 75%;
-      *width: 74.9690%; }
-    #conversejs .pure-u-lg-19-24 {
-      width: 79.1667%;
-      *width: 79.1357%; }
-    #conversejs .pure-u-lg-4-5 {
-      width: 80%;
-      *width: 79.9690%; }
-    #conversejs .pure-u-lg-5-6,
-    #conversejs .pure-u-lg-20-24 {
-      width: 83.3333%;
-      *width: 83.3023%; }
-    #conversejs .pure-u-lg-7-8,
-    #conversejs .pure-u-lg-21-24 {
-      width: 87.5000%;
-      *width: 87.4690%; }
-    #conversejs .pure-u-lg-11-12,
-    #conversejs .pure-u-lg-22-24 {
-      width: 91.6667%;
-      *width: 91.6357%; }
-    #conversejs .pure-u-lg-23-24 {
-      width: 95.8333%;
-      *width: 95.8023%; }
-    #conversejs .pure-u-lg-1,
-    #conversejs .pure-u-lg-1-1,
-    #conversejs .pure-u-lg-5-5,
-    #conversejs .pure-u-lg-24-24 {
-      width: 100%; } }
-  @media screen and (min-width: 80em) {
-    #conversejs .pure-u-xl-1,
-    #conversejs .pure-u-xl-1-1,
-    #conversejs .pure-u-xl-1-2,
-    #conversejs .pure-u-xl-1-3,
-    #conversejs .pure-u-xl-2-3,
-    #conversejs .pure-u-xl-1-4,
-    #conversejs .pure-u-xl-3-4,
-    #conversejs .pure-u-xl-1-5,
-    #conversejs .pure-u-xl-2-5,
-    #conversejs .pure-u-xl-3-5,
-    #conversejs .pure-u-xl-4-5,
-    #conversejs .pure-u-xl-5-5,
-    #conversejs .pure-u-xl-1-6,
-    #conversejs .pure-u-xl-5-6,
-    #conversejs .pure-u-xl-1-8,
-    #conversejs .pure-u-xl-3-8,
-    #conversejs .pure-u-xl-5-8,
-    #conversejs .pure-u-xl-7-8,
-    #conversejs .pure-u-xl-1-12,
-    #conversejs .pure-u-xl-5-12,
-    #conversejs .pure-u-xl-7-12,
-    #conversejs .pure-u-xl-11-12,
-    #conversejs .pure-u-xl-1-24,
-    #conversejs .pure-u-xl-2-24,
-    #conversejs .pure-u-xl-3-24,
-    #conversejs .pure-u-xl-4-24,
-    #conversejs .pure-u-xl-5-24,
-    #conversejs .pure-u-xl-6-24,
-    #conversejs .pure-u-xl-7-24,
-    #conversejs .pure-u-xl-8-24,
-    #conversejs .pure-u-xl-9-24,
-    #conversejs .pure-u-xl-10-24,
-    #conversejs .pure-u-xl-11-24,
-    #conversejs .pure-u-xl-12-24,
-    #conversejs .pure-u-xl-13-24,
-    #conversejs .pure-u-xl-14-24,
-    #conversejs .pure-u-xl-15-24,
-    #conversejs .pure-u-xl-16-24,
-    #conversejs .pure-u-xl-17-24,
-    #conversejs .pure-u-xl-18-24,
-    #conversejs .pure-u-xl-19-24,
-    #conversejs .pure-u-xl-20-24,
-    #conversejs .pure-u-xl-21-24,
-    #conversejs .pure-u-xl-22-24,
-    #conversejs .pure-u-xl-23-24,
-    #conversejs .pure-u-xl-24-24 {
-      display: inline-block;
-      *display: inline;
-      zoom: 1;
-      letter-spacing: normal;
-      word-spacing: normal;
-      vertical-align: top;
-      text-rendering: auto; }
-    #conversejs .pure-u-xl-1-24 {
-      width: 4.1667%;
-      *width: 4.1357%; }
-    #conversejs .pure-u-xl-1-12,
-    #conversejs .pure-u-xl-2-24 {
-      width: 8.3333%;
-      *width: 8.3023%; }
-    #conversejs .pure-u-xl-1-8,
-    #conversejs .pure-u-xl-3-24 {
-      width: 12.5000%;
-      *width: 12.4690%; }
-    #conversejs .pure-u-xl-1-6,
-    #conversejs .pure-u-xl-4-24 {
-      width: 16.6667%;
-      *width: 16.6357%; }
-    #conversejs .pure-u-xl-1-5 {
-      width: 20%;
-      *width: 19.9690%; }
-    #conversejs .pure-u-xl-5-24 {
-      width: 20.8333%;
-      *width: 20.8023%; }
-    #conversejs .pure-u-xl-1-4,
-    #conversejs .pure-u-xl-6-24 {
-      width: 25%;
-      *width: 24.9690%; }
-    #conversejs .pure-u-xl-7-24 {
-      width: 29.1667%;
-      *width: 29.1357%; }
-    #conversejs .pure-u-xl-1-3,
-    #conversejs .pure-u-xl-8-24 {
-      width: 33.3333%;
-      *width: 33.3023%; }
-    #conversejs .pure-u-xl-3-8,
-    #conversejs .pure-u-xl-9-24 {
-      width: 37.5000%;
-      *width: 37.4690%; }
-    #conversejs .pure-u-xl-2-5 {
-      width: 40%;
-      *width: 39.9690%; }
-    #conversejs .pure-u-xl-5-12,
-    #conversejs .pure-u-xl-10-24 {
-      width: 41.6667%;
-      *width: 41.6357%; }
-    #conversejs .pure-u-xl-11-24 {
-      width: 45.8333%;
-      *width: 45.8023%; }
-    #conversejs .pure-u-xl-1-2,
-    #conversejs .pure-u-xl-12-24 {
-      width: 50%;
-      *width: 49.9690%; }
-    #conversejs .pure-u-xl-13-24 {
-      width: 54.1667%;
-      *width: 54.1357%; }
-    #conversejs .pure-u-xl-7-12,
-    #conversejs .pure-u-xl-14-24 {
-      width: 58.3333%;
-      *width: 58.3023%; }
-    #conversejs .pure-u-xl-3-5 {
-      width: 60%;
-      *width: 59.9690%; }
-    #conversejs .pure-u-xl-5-8,
-    #conversejs .pure-u-xl-15-24 {
-      width: 62.5000%;
-      *width: 62.4690%; }
-    #conversejs .pure-u-xl-2-3,
-    #conversejs .pure-u-xl-16-24 {
-      width: 66.6667%;
-      *width: 66.6357%; }
-    #conversejs .pure-u-xl-17-24 {
-      width: 70.8333%;
-      *width: 70.8023%; }
-    #conversejs .pure-u-xl-3-4,
-    #conversejs .pure-u-xl-18-24 {
-      width: 75%;
-      *width: 74.9690%; }
-    #conversejs .pure-u-xl-19-24 {
-      width: 79.1667%;
-      *width: 79.1357%; }
-    #conversejs .pure-u-xl-4-5 {
-      width: 80%;
-      *width: 79.9690%; }
-    #conversejs .pure-u-xl-5-6,
-    #conversejs .pure-u-xl-20-24 {
-      width: 83.3333%;
-      *width: 83.3023%; }
-    #conversejs .pure-u-xl-7-8,
-    #conversejs .pure-u-xl-21-24 {
-      width: 87.5000%;
-      *width: 87.4690%; }
-    #conversejs .pure-u-xl-11-12,
-    #conversejs .pure-u-xl-22-24 {
-      width: 91.6667%;
-      *width: 91.6357%; }
-    #conversejs .pure-u-xl-23-24 {
-      width: 95.8333%;
-      *width: 95.8023%; }
-    #conversejs .pure-u-xl-1,
-    #conversejs .pure-u-xl-1-1,
-    #conversejs .pure-u-xl-5-5,
-    #conversejs .pure-u-xl-24-24 {
-      width: 100%; } }
   #conversejs .pure-form input[type="text"],
   #conversejs .pure-form input[type="password"],
   #conversejs .pure-form input[type="email"],
@@ -1629,114 +989,6 @@
   #conversejs a.pure-button-selected {
     background-color: #0078e7;
     color: #fff; }
-  #conversejs .pure-menu {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-  #conversejs .pure-menu-fixed {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 3; }
-  #conversejs .pure-menu-list,
-  #conversejs .pure-menu-item {
-    position: relative; }
-  #conversejs .pure-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0; }
-  #conversejs .pure-menu-item {
-    padding: 0;
-    margin: 0;
-    height: 100%; }
-  #conversejs .pure-menu-link,
-  #conversejs .pure-menu-heading {
-    display: block;
-    text-decoration: none;
-    white-space: nowrap; }
-  #conversejs .pure-menu-horizontal {
-    width: 100%;
-    white-space: nowrap; }
-  #conversejs .pure-menu-horizontal .pure-menu-list {
-    display: inline-block; }
-  #conversejs .pure-menu-horizontal .pure-menu-item,
-  #conversejs .pure-menu-horizontal .pure-menu-heading,
-  #conversejs .pure-menu-horizontal .pure-menu-separator {
-    display: inline-block;
-    *display: inline;
-    zoom: 1;
-    vertical-align: middle; }
-  #conversejs .pure-menu-item .pure-menu-item {
-    display: block; }
-  #conversejs .pure-menu-children {
-    display: none;
-    position: absolute;
-    left: 100%;
-    top: 0;
-    margin: 0;
-    padding: 0;
-    z-index: 3; }
-  #conversejs .pure-menu-horizontal .pure-menu-children {
-    left: 0;
-    top: auto;
-    width: inherit; }
-  #conversejs .pure-menu-allow-hover:hover > .pure-menu-children,
-  #conversejs .pure-menu-active > .pure-menu-children {
-    display: block;
-    position: absolute; }
-  #conversejs .pure-menu-has-children > .pure-menu-link:after {
-    padding-left: 0.5em;
-    content: "\25B8";
-    font-size: small; }
-  #conversejs .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
-    content: "\25BE"; }
-  #conversejs .pure-menu-scrollable {
-    overflow-y: scroll;
-    overflow-x: hidden; }
-  #conversejs .pure-menu-scrollable .pure-menu-list {
-    display: block; }
-  #conversejs .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
-    display: inline-block; }
-  #conversejs .pure-menu-horizontal.pure-menu-scrollable {
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    -ms-overflow-style: none;
-    -webkit-overflow-scrolling: touch;
-    /* a little extra padding for this style to allow for scrollbars */
-    padding: .5em 0; }
-  #conversejs .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
-    display: none; }
-  #conversejs .pure-menu-separator {
-    background-color: #ccc;
-    height: 1px;
-    margin: .3em 0; }
-  #conversejs .pure-menu-horizontal .pure-menu-separator {
-    width: 1px;
-    height: 1.3em;
-    margin: 0 0.3em; }
-  #conversejs .pure-menu-heading {
-    text-transform: uppercase;
-    color: #565d64; }
-  #conversejs .pure-menu-link {
-    color: #777; }
-  #conversejs .pure-menu-children {
-    background-color: #fff; }
-  #conversejs .pure-menu-link,
-  #conversejs .pure-menu-disabled,
-  #conversejs .pure-menu-heading {
-    padding: .5em 1em; }
-  #conversejs .pure-menu-disabled {
-    opacity: .5; }
-  #conversejs .pure-menu-disabled .pure-menu-link:hover {
-    background-color: transparent; }
-  #conversejs .pure-menu-active > .pure-menu-link,
-  #conversejs .pure-menu-link:hover,
-  #conversejs .pure-menu-link:focus {
-    background-color: #eee; }
-  #conversejs .pure-menu-selected .pure-menu-link,
-  #conversejs .pure-menu-selected .pure-menu-link:visited {
-    color: #000; }
   #conversejs *, #conversejs *:before, #conversejs *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -1782,12 +1034,6 @@
     text-decoration: none;
     color: #436F64;
     text-shadow: none; }
-  #conversejs form.pure-form.converse-form {
-    padding: 1.5em; }
-    #conversejs form.pure-form.converse-form label {
-      margin-top: 1em; }
-    #conversejs form.pure-form.converse-form input {
-      margin-bottom: 1em; }
 
 #conversejs {
   bottom: 0;
@@ -1896,8 +1142,6 @@
     border-bottom-left-radius: 4px; }
   #conversejs .error {
     color: red; }
-  #conversejs input.error {
-    border: 1px solid red; }
   #conversejs .reg-feedback {
     font-size: 85%; }
   #conversejs .reg-feedback,
@@ -1931,12 +1175,28 @@
     padding: 1px 0 1px 5px; }
   #conversejs .activated {
     display: block !important; }
+  #conversejs .pure-button {
+    border-radius: 4px; }
   #conversejs form.pure-form.converse-form {
-    padding: 1.5em; }
+    background: white;
+    margin: 1em; }
+    #conversejs form.pure-form.converse-form legend {
+      color: #777; }
     #conversejs form.pure-form.converse-form label {
       margin-top: 1em; }
-    #conversejs form.pure-form.converse-form input {
-      margin-bottom: 1em; }
+    #conversejs form.pure-form.converse-form input[type=text],
+    #conversejs form.pure-form.converse-form input[type=password],
+    #conversejs form.pure-form.converse-form input[type=number],
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      height: 2.2em; }
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      padding-left: 1em;
+      padding-right: 1em; }
+    #conversejs form.pure-form.converse-form input.error {
+      border: 1px solid red;
+      color: #777; }
     #conversejs form.pure-form.converse-form .form-help {
       color: gray;
       font-size: 85%;
@@ -2256,8 +1516,7 @@
       #conversejs #controlbox #converse-register .instructions:hover {
         color: #777; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
-    margin: 2em 1em 1em 1em;
-    background: white; }
+    margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
       height: auto;
       white-space: normal; }
@@ -2270,78 +1529,66 @@
       color: #436F64; }
     #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
       width: 100%;
-      height: 30px;
-      margin: 1em 0; }
+      margin: 0.5em 0; }
   #conversejs #controlbox #users .add-converse-contact {
     margin: 0 0.5em 0.75em 0.5em; }
-  #conversejs #controlbox #chatrooms {
-    overflow-y: auto; }
-    #conversejs #controlbox #chatrooms form.add-chatroom {
-      background: none;
-      padding: 0.5em; }
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+    width: 100%; }
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
+    color: #436F64; }
+  #conversejs #controlbox #chatrooms #available-chatrooms {
+    padding: 0 1em 2em 1em;
+    text-align: left; }
+    #conversejs #controlbox #chatrooms #available-chatrooms dt {
+      border: none;
+      color: #777;
+      font-weight: normal;
+      padding: 0;
+      text-shadow: 0 1px 0 #FAFAFA; }
+    #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
+      border: none;
+      clear: both;
+      color: #777;
+      display: block;
+      font-weight: bold;
+      overflow: hidden;
+      padding: 0;
+      padding-top: 0.5em;
+      text-overflow: ellipsis;
+      text-shadow: 0 1px 0 #FAFAFA;
+      white-space: nowrap; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
+        background-color: #E1E6E5; }
+        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
+          display: block;
+          font-size: 14px; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
+        width: 15px;
+        display: none;
+        clear: right; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
+        float: left;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 150px; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
+        font-size: 11px;
+        font-style: normal;
+        font-weight: normal; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
+        display: block;
+        margin-left: 5px; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
         margin: 0;
-        width: 100%;
-        padding: 0.25em; }
-      #conversejs #controlbox #chatrooms form.add-chatroom span.spinner,
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
-        margin-top: 0.5em;
-        display: table-cell;
-        width: auto; }
-      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
-        color: #436F64; }
-    #conversejs #controlbox #chatrooms #available-chatrooms {
-      text-align: left; }
-      #conversejs #controlbox #chatrooms #available-chatrooms dt {
-        font-weight: normal;
-        color: #777;
-        border: none;
-        padding: 0.5em;
-        text-shadow: 0 1px 0 #FAFAFA; }
-      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
-        border: none;
-        clear: both;
-        color: #777;
+        padding: 0;
         display: block;
-        font-weight: bold;
-        overflow: hidden;
-        padding: 0.25em 0.5em;
-        text-overflow: ellipsis;
-        text-shadow: 0 1px 0 #FAFAFA;
-        white-space: nowrap; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
-          background-color: #E1E6E5; }
-          #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
-            display: block;
-            font-size: 14px; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
-          width: 15px;
-          display: none;
-          clear: right; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
-          float: left;
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 150px; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
-          font-size: 11px;
-          font-style: normal;
-          font-weight: normal; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
-          display: block;
-          margin-left: 5px; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
-          margin: 0;
-          padding: 0;
-          display: block;
-          white-space: normal; }
-        #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
-          clear: left;
-          width: 100%; }
+        white-space: normal; }
+      #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
+        clear: left;
+        width: 100%; }
   #conversejs #controlbox .dropdown a {
     width: 148px;
     display: inline-block;
@@ -2460,7 +1707,7 @@
     height: 289px;
     height: -webkit-calc(100% - 44px);
     height: calc(100% - 44px);
-    overflow-y: hidden;
+    overflow-y: scroll;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
       font-size: 14px;

mockup/controlbox.html

@@ -27,45 +27,55 @@
 
     <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
         <div class="flyout box-flyout">
-            <div class="dragresize"></div>
+            <div class="dragresize dragresize-top"></div>
+            <div class="dragresize dragresize-topleft"></div>
+            <div class="dragresize dragresize-left"></div>
             <div class="chat-head controlbox-head">
                 <ul id="controlbox-tabs">
-                    <li><a class="current" href="#login">Sign in</a></li>
-                    <li><a href="#register">Register</a></li>
+                    <li><a class="current" href="#login-dialog">Sign in</a></li>
+                    <li><a class="s" href="#register">Register</a></li>
                 </ul>
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
             </div>
-            <div id="login-dialog" class="controlbox-pane">
-                <form id="converse-login">
-                    <label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
-                    <label>Password:</label><input type="password" id="password">
-                    <input class="submit" type="submit" value="Log In">
-                    <span class="conn-feedback"></span>
-                </form>
-            </div>
-            <div id="register" class="controlbox-pane" style="display: none">
-                <form id="converse-register">
-                    <label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
-                    <label>Password:</label><input type="password" name="password">
-                    <label>Confirm Password:</label><input type="password" name="password_confirm">
-                    <input class="submit" type="submit" value="Register">
+            <div class="controlbox-panes">
+                <div id="login-dialog" class="controlbox-pane">
+                <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
+                    <label>XMPP Username:</label>
+                    <input type="text" name="jid" placeholder="user@server">
+                    <label>Password:</label>
+                    <input type="password" name="password" placeholder="password">
+                    <input class="pure-button submit" type="submit" value="Log In">
                     <span class="conn-feedback"></span>
                 </form>
+                </div>
+                <div id="register" class="controlbox-pane" style="display: none;">
+                    <form id="converse-register" class="pure-form converse-form">
+                        <span class="reg-feedback"></span>
+                        <label>Your XMPP provider's domain name:</label>
+                        <input type="text" name="domain" placeholder=" e.g. conversejs.org">
+                        <p class="form-help">
+                            Tip: A list of public XMPP providers is available 
+                            <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
+                        </p>
+                        <input class="pure-button submit" type="submit" value="Fetch registration form">
+                    </form>
+                </div>
             </div>
         </div>
     </div>
 
     <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
         <div class="flyout box-flyout">
-            <div class="dragresize"></div>
+            <div class="dragresize dragresize-top"></div>
+            <div class="dragresize dragresize-topleft"></div>
+            <div class="dragresize dragresize-left"></div>
             <div class="chat-head controlbox-head">
                 <ul id="controlbox-tabs">
                     <li><a class="s current" href="#users">Contacts</a></li>
                     <li><a class="s" href="#chatrooms">Rooms</a></li>
                 </ul>
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
             </div>
-
             <div id="users" class="controlbox-pane" style="display: block;">
                 <form class="set-xmpp-status" action="" method="post">
                     <span id="xmpp-status-holder">
@@ -101,11 +111,6 @@
                                     <span class="icon-offline"></span>
                                     Offline</a>
                                 </li>
-                                <li>
-                                    <a href="#" class="offline" data-value="offline">
-                                    <span class="icon-exit"></span>
-                                    Logout</a>
-                                </li>
                             </ul>
                         </dd>
                     </dl>
@@ -131,17 +136,20 @@
                     </dd>
                 </dl>
                 <div id="converse-roster">
-                    <input class="roster-filter" placeholder="Type to filter">
-                    <select class="filter-type">
-                        <option value="contacts">Contacts</option>
-                        <option value="groups">Groups</option>
-                    </select>
+                    <span class="input-button-group">
+                        <input class="roster-filter" placeholder="Type to filter">
+                        <select class="filter-type">
+                            <option value="contacts">Contacts</option>
+                            <option value="groups">Groups</option>
+                        </select>
+                    </span>
+
                     <dl class="roster-contacts" style="display: block;">
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
                         </dt>
                         <dd class="online current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                            <a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
                                 <span class="icon-online" title="This contact is online"></span>
                                 Victor Matfield
                             </a>
@@ -161,7 +169,6 @@
                             </a>
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
-
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
                         </dt>
@@ -179,7 +186,6 @@
                             </a>
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
-
                         <dt class="roster-group" style="display: block;">
                             <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
                         </dt>
@@ -197,7 +203,6 @@
                             </a>
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
-
                         <dt class="roster-group" style="display: block;">
                             <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
                         </dt>
@@ -208,12 +213,11 @@
                             </a>
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
-
-                        <dt id="xmpp-contact-requests" style="display: block;">
+                        <dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
                             <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
                         </dt>
                         <dd class="offline requesting-xmpp-contact">
-                            <span class="req-contact-name">Bob Skinstad</span>
+                            <span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
                             <span class="request-actions">
                                 <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
                                 <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
@@ -227,10 +231,10 @@
                             </span>
                         </dd>
 
-                        <dt id="pending-xmpp-contacts" style="display: block;">
+                        <dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
                             <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
                         </dt>
-                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Rassie Erasmus</span>
+                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
                             <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                         </dd>
                         <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
@@ -238,41 +242,41 @@
                         </dd>
                     </dl>
                 </div>
-            </div>
+              </div>
 
-            <div id="chatrooms" class="controlbox-pane" style="display: none;">
-                <form class="add-chatroom" action="" method="post">
-                    <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
-                    <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                    <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                    <input type="submit" name="join" value="Join">
-                    <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
-                </form>
-                <dl id="available-chatrooms">
-                    <dt>Rooms on conference.opkode.im</dt>
-                    <dd class="available-chatroom">
-                        <a class="open-room" 
-                            data-room-jid="converse.js@conference.opkode.im"
-                            title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
-                        <a class="room-info icon-room-info" 
-                            data-room-jid="converse.js@conference.opkode.im" 
-                            title="Show more information on this room" href="#">&nbsp;</a>
-                        <div class="room-info">
-                            <p class="room-info"><strong>Description:</strong></p>
-                            <p class="room-info"><strong>Occupants:</strong> 2</p>
-                            <p class="room-info"><strong>Features:</strong> </p>
-                            <ul>
-                                <li class="room-info">Moderated</li><li class="room-info">Open room</li>
-                                <li class="room-info">Permanent room</li><li class="room-info">Public</li>
-                                <li class="room-info">Semi-anonymous</li>
-                                <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
-                                <p></p>
-                            </ul>
-                        </div>
-                    </dd>
-                </dl>
-            </div>
+                <div id="chatrooms" class="controlbox-pane" style="">
+                    <form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
+                        <fieldset>
+                            <legend>Join an existing room or create a new one</legend>
+                            <label>Room name</label>
+                            <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
+                            <label>Nickname</label>
+                            <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
+                            <input type="submit" class="pure-button left" name="join" value="Open Room">
+                        </fieldset>
 
+                        <fieldset>
+                            <label>Server</label>
+                            <!-- TODO: this must be a tooltip
+                            <p class="form-help">Rooms are hosted on XMPP servers. You need to specify a server on which the room you want to join is hosted. </p>
+                            -->
+                            <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
+                            <input type="button" class="pure-button right" name="show" id="show-rooms" value="Show rooms">
+                        </fieldset>
+                    </form>
+                    <dl id="available-chatrooms">
+                        <dt>Rooms on conference.myserver.com</dt>
+                        <dd class="available-chatroom">
+                            <a class="open-room" data-room-jid="eee@conference.opkode.com" title="Click to open this room" href="#">Current Events</a>
+                            <a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
+                        </dd>
+                        <dd class="available-chatroom">
+                            <a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development</a>
+                            <a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
+                        </dd>
+                    </dl>
+                  </dl>
+            </div>
         </div>
     </div>
 </div>

mockup/index.html

@@ -25,259 +25,6 @@
         <span style="display: none" id="online-count">(0)</span>
     </a>
 
-    <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
-        <div class="flyout box-flyout">
-            <div class="dragresize dragresize-top"></div>
-            <div class="dragresize dragresize-topleft"></div>
-            <div class="dragresize dragresize-left"></div>
-            <div class="chat-head controlbox-head">
-                <ul id="controlbox-tabs">
-                    <li><a class="current" href="#login-dialog">Sign in</a></li>
-                    <li><a class="s" href="#register">Register</a></li>
-                </ul>
-                <a class="chatbox-btn close-chatbox-button icon-close"></a>
-            </div>
-            <div class="controlbox-panes">
-                <div id="login-dialog" class="controlbox-pane">
-                <form class="pure-form pure-form-stacked" id="converse-login" method="post">
-                    <label>XMPP Username:</label>
-                    <input type="text" name="jid" placeholder="user@server">
-                    <label>Password:</label>
-                    <input type="password" name="password" placeholder="password">
-                    <input class="pure-button submit" type="submit" value="Log In">
-                    <span class="conn-feedback"></span>
-                </form>
-                </div>
-                <div id="register" class="controlbox-pane" style="display: none;">
-                    <form id="converse-register" class="pure-form">
-                        <span class="reg-feedback"></span>
-                        <label>Your XMPP provider's domain name:</label>
-                        <input type="text" name="domain" placeholder=" e.g. conversejs.org">
-                        <p class="form-help">
-                            Tip: A list of public XMPP providers is available 
-                            <a href="https://xmpp.net/directory.php" class="url" target="_blank">here</a>.
-                        </p>
-                        <input class="pure-button submit" type="submit" value="Fetch registration form">
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
-        <div class="flyout box-flyout">
-            <div class="dragresize dragresize-top"></div>
-            <div class="dragresize dragresize-topleft"></div>
-            <div class="dragresize dragresize-left"></div>
-            <div class="chat-head controlbox-head">
-                <ul id="controlbox-tabs">
-                    <li><a class="s current" href="#users">Contacts</a></li>
-                    <li><a class="s" href="#chatrooms">Rooms</a></li>
-                </ul>
-                <a class="chatbox-btn close-chatbox-button icon-close"></a>
-            </div>
-            <div id="users" class="controlbox-pane" style="display: block;">
-                <form class="set-xmpp-status" action="" method="post">
-                    <span id="xmpp-status-holder">
-                    <dl id="target" class="dropdown">
-                        <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
-                            <div class="xmpp-status">
-                                <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
-                                    <span class="icon-online"></span>
-                                    I am online
-                                </a>
-                                <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
-                            </div>
-                        </dt>
-                        <dd>
-                            <ul style="display: none;" class="xmpp-status-menu">
-                                <li>
-                                    <a href="#" class="online" data-value="online">
-                                    <span class="icon-online"></span>
-                                    Online</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="dnd" data-value="dnd">
-                                    <span class="icon-dnd"></span>
-                                    Busy</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="away" data-value="away">
-                                    <span class="icon-away"></span>
-                                    Away</a>
-                                </li>
-                                <li>
-                                    <a href="#" class="offline" data-value="offline">
-                                    <span class="icon-offline"></span>
-                                    Offline</a>
-                                </li>
-                            </ul>
-                        </dd>
-                    </dl>
-                    </span>
-                </form>
-                <dl class="add-converse-contact dropdown">
-                    <dt id="xmpp-contact-search" class="fancy-dropdown">
-                        <a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
-                            <span class="icon-plus"></span>
-                            Add a contact
-                        </a>
-                    </dt>
-                    <dd class="search-xmpp" style="display:none">
-                        <ul>
-                            <li>
-                                <form class="add-xmpp-contact">
-                                    <input type="text" name="identifier" class="username" placeholder="Contact username">
-                                    <button type="submit">Add</button>
-                                </form>
-                            </li>
-                            <li></li>
-                        </ul>
-                    </dd>
-                </dl>
-                <div id="converse-roster">
-                    <span class="input-button-group">
-                        <input class="roster-filter" placeholder="Type to filter">
-                        <select class="filter-type">
-                            <option value="contacts">Contacts</option>
-                            <option value="groups">Groups</option>
-                        </select>
-                    </span>
-
-                    <dl class="roster-contacts" style="display: block;">
-                        <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
-                        </dt>
-                        <dd class="online current-xmpp-contact">
-                            <a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
-                                <span class="icon-online" title="This contact is online"></span>
-                                Victor Matfield
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dd class="away current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-away" title="this contact is away"></span>
-                                William Winterbottom
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dd class="dnd current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-dnd" title="This contact is busy"></span>
-                                Gary Teichmann
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
-                        </dt>
-                        <dd class="away current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-away" title="this contact is away"></span>
-                                Allan Donald 
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dd class="offline current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-offline" title="This contact is offline"></span>
-                                Corné Krige
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dt class="roster-group" style="display: block;">
-                            <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
-                        </dt>
-                        <dd class="online current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-online" title="This contact is online"></span>
-                                John Smit
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dd class="online current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-online" title="This contact is online"></span>
-                                Bakkies Botha
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dt class="roster-group" style="display: block;">
-                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
-                        </dt>
-                        <dd class="online current-xmpp-contact">
-                            <a class="open-chat" title="Click to chat with this contact" href="#">
-                                <span class="icon-online" title="This contact is online"></span>
-                                James Small 
-                            </a>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
-                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
-                        </dt>
-                        <dd class="offline requesting-xmpp-contact">
-                            <span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
-                            <span class="request-actions">
-                                <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
-                                <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
-                            </span>
-                        </dd>
-                        <dd class="offline requesting-xmpp-contact">
-                            <span class="req-contact-name">André Vos</span>
-                            <span class="request-actions">
-                                <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
-                                <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
-                            </span>
-                        </dd>
-
-                        <dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
-                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
-                        </dt>
-                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
-                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                        </dd>
-                    </dl>
-                </div>
-              </div>
-              <div id="chatrooms" class="controlbox-pane" style="display: none;">
-                  <form class="add-chatroom" action="" method="post">
-                      <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
-                      <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                      <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                      <input type="submit" name="join" value="Join">
-                      <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
-                  </form>
-                  <dl id="available-chatrooms">
-                      <dt>Rooms on conference.opkode.im</dt>
-                      <dd class="available-chatroom">
-                          <a class="open-room" 
-                              data-room-jid="converse.js@conference.opkode.im"
-                              title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
-                          <a class="room-info icon-room-info" 
-                              data-room-jid="converse.js@conference.opkode.im" 
-                              title="Show more information on this room" href="#">&nbsp;</a>
-                          <div class="room-info">
-                              <p class="room-info"><strong>Description:</strong></p>
-                              <p class="room-info"><strong>Occupants:</strong> 2</p>
-                              <p class="room-info"><strong>Features:</strong> </p>
-                              <ul>
-                                  <li class="room-info">Moderated</li><li class="room-info">Open room</li>
-                                  <li class="room-info">Permanent room</li><li class="room-info">Public</li>
-                                  <li class="room-info">Semi-anonymous</li>
-                                  <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
-                                  <p></p>
-                              </ul>
-                          </div>
-                      </dd>
-                  </dl>
-            </div>
-        </div>
-    </div>
-
     <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
         <div class="flyout box-flyout">
             <div class="dragresize dragresize-top"></div>

sass/_controlbox.scss

@@ -73,8 +73,7 @@
         }
 
         #converse-register, #converse-login {
-            margin: 2em 1em 1em 1em;
-            background: white;
+            margin-top: 2em;
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -91,8 +90,7 @@
             }
             input {
                 width: 100%;
-                height: 30px;
-                margin: 1em 0;
+                margin: 0.5em 0;
             }
         }
         #users {
@@ -102,35 +100,24 @@
         }
 
         #chatrooms {
-            overflow-y: auto;
             form.add-chatroom {
-                background: none;
-                padding: 0.5em;
                 input[type=button],
                 input[type=submit],
                 input[type=text] {
-                    margin: 0;
                     width: 100%;
-                    padding: 0.25em;
-                }
-                span.spinner,
-                input[type=button],
-                input[type=submit] {
-                    margin-top: 0.5em;
-                    display: table-cell;
-                    width: auto;
                 }
                 input[type=submit] {
                     color: $save-button-color;
                 }
             }
             #available-chatrooms {
+                padding: 0 1em 2em 1em;
                 text-align: left;
                 dt {
-                    font-weight: normal;
-                    color: $text-color;
                     border: none;
-                    padding: 0.5em;
+                    color: $text-color;
+                    font-weight: normal;
+                    padding: 0;
                     text-shadow: 0 1px 0 $text-shadow-color;
                 }
                 dd.available-chatroom {
@@ -140,7 +127,8 @@
                     display: block;
                     font-weight: bold;
                     overflow: hidden;
-                    padding: 0.25em 0.5em;
+                    padding: 0;
+                    padding-top: 0.5em;
                     text-overflow: ellipsis;
                     text-shadow: 0 1px 0 $text-shadow-color;
                     white-space: nowrap;
@@ -341,7 +329,7 @@
             width: 100%;
             height: 289px;
             @include calc(height, '100% - #{$chat-head-height}');
-            overflow-y: hidden;
+            overflow-y: scroll;
             overflow-x: hidden;
             label {
                 font-size: $font-size;

sass/_core.scss

@@ -115,10 +115,6 @@
     .error {
         color: red;
     }
-    input.error {
-        border: 1px solid red;
-    }
-
     .reg-feedback {
         font-size: 85%;
     }
@@ -164,14 +160,35 @@
         display: block !important;
     }
 
+    .pure-button {
+        border-radius: $chatbox-border-radius;
+    }
+
     form {
         &.pure-form.converse-form {
-            padding: 1.5em;
+            background: white;
+            margin: 1em;
+            legend {
+                color: $text-color;
+            }
             label {
                 margin-top: 1em;
             }
-            input {
-                margin-bottom: 1em;
+            input[type=text],
+            input[type=password],
+            input[type=number],
+            input[type=button],
+            input[type=submit] {
+                height: 2.2em;
+            }
+            input[type=button],
+            input[type=submit] {
+                padding-left: 1em;
+                padding-right: 1em;
+            }
+            input.error {
+                border: 1px solid red;
+                color: $text-color;
             }
             .form-help {
                 color: gray;

sass/_normalize.scss

@@ -1,9 +1,7 @@
 #conversejs {
     @import "pure/base";
-    @import "pure/grids";
     @import "pure/forms";
     @import "pure/buttons";
-    @import "pure/menus";
 
     @include box-sizing(border-box);
     *, *:before, *:after {
@@ -66,17 +64,4 @@
         color: $link-color;
         text-shadow: none;
     }
-
-    form {
-        &.pure-form.converse-form {
-            padding: 1.5em;
-            label {
-                margin-top: 1em;
-            }
-            input {
-                margin-bottom: 1em;
-            }
-        }
-    }
-
 }

src/templates/login_panel.html

@@ -1,4 +1,4 @@
-<form class="pure-form pure-form-stacked" id="converse-login" method="post">
+<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
     {[ if (auto_login) { ]}
         <span class="spinner login-submit"/>
     {[ } ]}
@@ -8,7 +8,7 @@
             <input type="text" name="jid" placeholder="{{placeholder_username}}">
             <label>{{label_password}}</label>
             <input type="password" name="password" placeholder="{{placeholder_password}}">
-            <input class="submit" type="submit" value="{{label_login}}">
+            <input class="pure-button" type="submit" value="{{label_login}}">
             <span class="conn-feedback"></span>
         {[ } ]}
         {[ if (authentication == ANONYMOUS) { ]}

src/templates/register_panel.html

@@ -1,4 +1,4 @@
-<form id="converse-register" class="pure-form">
+<form id="converse-register" class="pure-form converse-form">
     <span class="reg-feedback"></span>
     <label>{{label_domain}}</label>
     <input type="text" name="domain" placeholder="{{domain_placeholder}}">

src/templates/registration_request.html

@@ -1,3 +1,3 @@
 <span class="spinner login-submit"/>
 <p class="info">{{info_message}}</p>
-<button class="cancel hor_centered">{{cancel}}</button>
+<button class="pure-button cancel hor_centered">{{cancel}}</button>

src/templates/room_panel.html

@@ -1,18 +1,16 @@
-<form class="add-chatroom" action="" method="post">
-    <label>{{label_room_name}}</label>
-    <input type="text" name="chatroom" class="new-chatroom-name"
-        placeholder="{{label_room_name}}"/>
-    <label>{{label_nickname}}</label>
-    <input type="text" name="nick" class="new-chatroom-nick"
-        placeholder="{{label_nickname}}"/>
-    {[ if (server_input_type != 'hidden') { ]}
-        <label{{server_label_global_attr}}>{{label_server}}</label>
-    {[ } ]}
-    <input type="{{server_input_type}}" name="server" class="new-chatroom-server"
-        placeholder="{{label_server}}"/>
-    <div class="button-group">
-        <input type="submit" class="left" name="join" value="{{label_join}}"/>
-        <input type="button" class="right" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
-    </div>
+<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
+    <fieldset>
+        <label>{{label_room_name}}</label>
+        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
+        <label>{{label_nickname}}</label> <input type="text" name="nick" class="new-chatroom-nick" placeholder="{{label_nickname}}"/>
+        <input type="submit" class="pure-button" name="join" value="{{label_join}}"/>
+    </fieldset>
+    <fieldset>
+        {[ if (server_input_type != 'hidden') { ]}
+            <label{{server_label_global_attr}}>{{label_server}}</label>
+        {[ } ]}
+        <input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
+        <input type="button" class="pure-button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
+    </fieldset>
 </form>
 <dl id="available-chatrooms"></dl>

src/utils.js

@@ -10,7 +10,7 @@
 
     var XFORM_TYPE_MAP = {
         'text-private': 'password',
-        'text-single': 'textline',
+        'text-single': 'text',
         'fixed': 'label',
         'boolean': 'checkbox',
         'hidden': 'hidden',