* {
  margin: 0;
  padding: 0;
}

p {
  padding: .5em 0 1em 0;
}

form {
  padding: .5em 0 1em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (max-width: 45em) {
  form {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

form > * {
  flex-grow: 1;
}
form input[type="submit"] {
  flex-grow: 0;
}
form input#msg {
  flex-grow: 4;
}

table {
  width: 100%;
}
tr { 
  display: flex;
  align-items: stretch;    
}
td:last-child {
  flex:1; /* last td to fill remaining width */
}

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  background-color: green;
  color: white;
}
#header h1 {
  font-weight: bold;
  font-size: 100%;
}

#status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  text-align: right;
}
@media (min-width: 45em) {
  #status {
    bottom: auto;
    left: auto;
    top: 0;
  }
}
#status.error {
  background-color: lightred;
}
#status.notice {
  background-color: yellow;
}
#status.success {
  background-color: lightgreen;
}

#main {
  padding: 2em 1em 2em 1em;
}

.clear {
  clear: both;
}
#msgs .msg {
  border: 1px solid black;
  margin: 1ex;
  padding: 1ex;
  border-radius: 2ex;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
}
#msgs .me {
  float: left;
}
#msgs .other {
  float: right;
}
#msgs .msg .header {
  border-bottom: 1px solid black;
  margin-bottom: .25ex;
  padding-bottom: .25ex;
  position: relative;
  height: 1em;
}
#msgs .msg .header .date {
  font-size: xx-small;
  float: left;
  /*position: absolute;
  left: 0;*/
}
#msgs .msg .header .sender {
  font-size: small;
  float: right;
  /*position: absolute;
  right: 0;*/
}
#msgs .msg .text {
  float: left;
}