/*
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

body {
  margin: 0;
  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;
  width:100%;
  height: 100%;
  min-width:400px;      /* Minimum width of layout - remove line if not required */
}
/* column container */
.colmask {
  position:relative;
  clear:both;
  float:left;
  width:100%;         /* width of whole page */
  height: 100%;
  overflow:hidden;    /* This chops off any overhanging divs */
  padding-top: 50px;
  box-sizing: border-box;
}
/* common column settings */
.colleft {
  float:left;
  width:100%;
  height: 100%;
  position:relative;
}
.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) */
}

header {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 0;
  height: 50px;
  background-color: #7fd0ed;
}
/* end layout */

#main {
  box-sizing: border-box;
  padding-bottom: 100px;
  height: 100%;
  border-left: 2px solid #acdbf5;
}
#main form {
  position: absolute;
  width: 100%;
  padding: 1em;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  height: 100px;
  background-color: #ddd;
}
.container {
  margin: auto;
  padding: 0 1em;
}


label {
  float: left;
  margin-right: 1em;
}

#compose-create,
#compose-cancel {
  float: right;
}

#send .conversation {
  padding: 0.3em 1em;
}

#send_numbers {
  max-width: 70%;
  margin-bottom: 1em;
}

#send_numbers:focus + .contacts,
.contacts:hover {
  display: block;
  z-index: 10;
}

.contacts {
  display: none;
  position: absolute;
  left: 10px;
}

.contact {
  border: solid 1px #ccc;
  background: #fff;
  font-size: 88%;
  padding-right: 5px;
  cursor: pointer;
}

.contact .pic {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: #ddd;
}

.contact .name, .contact .number {
  line-height: 30px;
  margin-left: 5px;
}

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
#send_link ~ #new-chat-help,
#new-group ~ #new-group-help {
  display: none;
}
#send_link:hover ~ #new-chat-help,
#new-group:hover ~ #new-group-help {
  display: block;
}
.help {
  display: inline-block;
  position: fixed;
  top: 10;
  right: 10;
  font-size: 0.8em;
  color: #7fd0ed;
}