New layout/design

Two column layout and style tweaks. Templatized conversation views.
Generalized list view.

css/conversation.css

@@ -3,14 +3,19 @@
   position: relative;
   min-height: 64px;
   margin: auto;
-  padding: 1em;
-  border-radius: 10px;
-  border: 2px solid #acdbf5;
+  padding: 0.5em;
   background-color: #7fd0ed;
   color: #fff;
-  margin-bottom: 0.5em;
   -webkit-animation-duration: 1s;
   -webkit-animation-name: convoopen;
+  clear: both;
+}
+li.conversation {
+  border-bottom: 1px solid #ccc;
+}
+
+.conversation .name {
+  padding: 1em 0 1em 3em;
 }
 
 .conversation.closed {
@@ -54,9 +59,7 @@
   float: right;
 }
 .conversation .image {
-  position: absolute;
-  top: 8px;
-  left: 10px;
+  float: left;
   display: inline-block;
   background-color: #fff;
   border: 2px solid #acdbf5;

css/popup.css

@@ -19,11 +19,75 @@
 
 body {
   margin: 0;
-  min-width: 400px;
   min-height: 500px;
   font-family: sans-serif;
   color: #333;
 }
+/* layout 2 col full height */
+html {
+    overflow: auto;
+    height: 100%;
+}
+body {
+  margin:0;
+  padding:0;
+  border:0;     /* This removes the border around the viewport in old versions of IE */
+  width:100%;
+  height: 100%;
+  min-width:400px;      /* Minimum width of layout - remove line if not required */
+          /* The min-width property does not work in old versions of Internet Explorer */
+}
+/* column container */
+.colmask {
+  position:relative;  /* This fixes the IE7 overflow hidden bug */
+  clear:both;
+  float:left;
+  width:100%;     /* width of whole page */
+  height: 100%;
+  overflow:hidden;    /* This chops off any overhanging divs */
+}
+/* common column settings */
+.colleft {
+  float:left;
+  width:100%;
+  height: 100%;
+  position:relative;
+  border-right: 2px solid #acdbf5;
+}
+.col1,
+.col2 {
+  float:left;
+  position:relative;
+  padding:0 0 1em 0;
+  overflow:hidden;
+}
+/* 2 Column (left menu) settings */
+.leftmenu .colleft {
+  right:72%;          /* right column width */
+  background:#f4f4f4; /* left column background colour */
+}
+.leftmenu .col1 {
+  width:72%;          /* right column content width */
+  left:100%;          /* 100% plus left column left padding */
+}
+.leftmenu .col2 {
+  width:28%;          /* left column content width (column width minus left and right padding) */
+}
+/* end layout */
+
+/*
+#sidebar {
+  float: left;
+  width: 30%;
+  padding: 1em;
+}
+
+#main {
+  margin-left: 35%;
+  padding: 1em;
+  border-left: 2px solid #acdbf5;
+}
+*/
 
 .container {
   max-width: 960px;
@@ -33,6 +97,7 @@ body {
 
 header {
   padding: 5px 0;
+  background-color: #7fd0ed;
 }
 
 label {
@@ -40,6 +105,7 @@ label {
   margin-right: 1em;
 }
 
+#compose-create,
 #compose-cancel {
   float: right;
 }
@@ -48,11 +114,12 @@ label {
   padding: 0.3em 1em;
 }
 
-#popup_send_numbers {
-  margin-bottom: 0;
+#send_numbers {
+  max-width: 70%;
+  margin-bottom: 1em;
 }
 
-#popup_send_numbers:focus + .contacts,
+#send_numbers:focus + .contacts,
 .contacts:hover {
   display: block;
   z-index: 10;