body
{
  margin: 10px;
}

.guestbook
{
}

#edit
{
  border: 1px solid #ff7f00;
  background-color: #FFE0B3;
  width: 590px;
  margin-bottom: 16px;
  padding: 4px 4px 4px 4px;
}

#edit table tr td.top
{
  vertical-align: top;
  padding-top: 4px;
}

#editAction
{
  font-weight: bold;
  color: #FF0000;
}

#edit table tr td.label
{
  width: 80px;
  font-weight: bold;
}

#search
{
  border: 1px solid #ff7f00;
  background-color: #FFE0B3;
  width: 590px;
  margin-bottom: 16px;
  padding: 4px 4px 4px 4px;
}

#search table tr td.top
{
  vertical-align: top;
  padding-top: 4px;
}

#search table tr td.label
{
  width: 80px;
  font-weight: bold;
}

#toggleEdit
{
  vertical-align: top;
  text-align: left;
  
  font-weight: bold;
  font-size: 13px;

  width: 130px;

  border: 1px solid #4D535D;
  border-bottom: 0px;
  background-color: #2C5785;
  
  padding: 2px 2px 2px 2px;
  
  color: #FFFFFF;
  cursor: pointer;
}

#toggleSearch
{
  vertical-align: top;
  text-align: left;
  
  font-weight: bold;
  font-size: 13px;

  width: 130px;

  border: 1px solid #4D535D;
  border-bottom: 0px;
  background-color: #2C5785;

  padding: 2px 2px 2px 2px;
  
  color: #FFFFFF;
  cursor: pointer;
}

#online
{
  padding: 2px 2px 2px 2px;
}

#offline
{
  padding: 2px 2px 2px 2px;
}

.guestbookHeader
{
  font-weight: bold;
  font-size: 18px;
}

.guestbookHeaderContainer
{
  margin-bottom: 10px;
}

#messageContainer
{
  border: 1px solid #4D535D;
  background-color: #CFCFCF;
  padding-left: 16px;
  padding-right: 16px;
}

#messages
{
  vertical-align: middle;
  text-align: center;
}

#searchMessages
{
  border: 1px solid #4D535D;
  background-color: #CFBBBB;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  width: 590px;
}

.message
{
  border: 1px solid #7f7f7f;
  margin-bottom: 16px;
  width: 580px;
}

.errorMessage
{
  width: 590px;
  background-color: #ffcfcf;
  border: 1px solid #ff7f7f;
  margin-bottom: 16px;
  padding: 4px 8px 4px 8px;
}

table.messageHeaderTable
{
  vertical-align: top;
  text-align: left;
  
  width: 100%;
  
  border-collapse: collapse;

  background-color: #A5A8C1;
  border-bottom: 1px solid #bfbfbf;
  border-right: 1px solid #9f9f9f;
}

table.messageHeaderTableHidden
{
  vertical-align: top;
  text-align: left;

  width: 100%;
  
  border-collapse: collapse;

  background-color: #A5A8C1;
  border: 2px solid #FF0000;
}

td.name
{
  vertical-align: top;
  text-align: left;
  font-weight: bold;
  width: 60%;
  font-size: 12px;
  padding: 4px 8px 4px 8px;
}

td.icon
{
  vertical-align: middle;
  text-align: center;

  width: 10%;
  height: 32px;

  padding: 4px 8px 4px 8px;
}

td.created
{
  vertical-align: top;
  text-align: left;

  width: 60%;
  padding: 4px 8px 4px 8px;
}

td.actions
{
  vertical-align: middle;
  text-align: right;
  width: 30%;
}

td.actions span
{
  padding: 2px 4px 2px 4px;
  height: 16px;
  vertical-align: middle;
}

td.text
{
  vertical-align: top;
  text-align: left;
  width: 100%;

  background-color: #FFFFFF;
  padding: 12px 12px 12px 12px;
}

.toggleHide
{
  cursor: pointer;
}

.replyIcon
{
  cursor: pointer;
}

.editMessage
{
  cursor: pointer;
}

#nameRow
{
  height: 40px;
}

#emailRow td
{
  padding-bottom: 10px;
}

#backwardUp, #backwardDown, #forwardUp, #forwardDown
{
  cursor: pointer;
}

#messageContainer table.buttons
{
  margin-top: 8px;
  margin-bottom: 8px;
}

#backwardUpContainer
{
  width: 40%;
  text-align: left;
}
#connectionStatusContainer
{
  width: 20%;
  text-align: center;
}
#forwardUpContainer
{
  width: 40%;
  text-align: right;
}

#backwardDownContainer
{
  width: 50%;
  text-align: left;
}
#forwardDownContainer
{
  width: 50%;
  text-align: right;
}

#name, #email
{
  width: 400px;
}

#text
{
  width: 400px;
  height: 120px;
}